Logo placement, size adjustment

[exposeclothing]

So im trying to adjust my header logo at the top of the page, i managed to do it in prestashop 1.5 but prestashop 1.6 seems different. Im using Firebug to inspect the elements, and it displays the .css file aswell as the line which defines the style.

 

In Firebug, its informing me the file i need to edit to acheive my logo size / placement on the page is

.col-sm-4, header .row #header_logo {                              global.css line 704

width; 33.3333%; }

 

in firebug when i edit this number to 100% instead of 33.3333% i get my desired outcome...

 

so in dreamweaver, within the global.css file, i find the line 704, i see the

right section and alter it to the same as within firebug  ...

 

.col-sm-4, header .row #header_logo {         

width; 100%; }

 

i save the file to the server, clear the cache / cookies, regenerate images within prestashop,

but it remains the same,

 

 

Firebug also has these related codes which iv also tried to edit - within firebug i was able to get my logo where i wanted it by changing the below code (not changing, just adding)

 

  header .row #header_logo {                                             global.css 5292
      padding-top: 15px;

     width:100%; }

 

still no effect on the store page

 

why does firebug keep directing me to the wrong code area, if these codes dont have effect on the element im inspecting?

 

also, what are these @media codes i keep seeing in the bootstrap template, as i see a code, with a repetition of the code under @media ....  what are these @media codes doing? does it tell the page to refer to a module for image/media settings or something else?

 

should i be editing this @media code to get the changes i want in the store?

 

exposeclothing.com.au

 

[dioniz]

Your logo is 100% wide on your site. Is that what you wanted to do?

 

@media are media queries. They are used for smaller resolutions for tablets and phones.

 

For example @media (max-width: 479px) means, whatever code is in this media query will happen if resolution is smaller then 479px

 

In FF you can resize page for various resolutions by Ctrl Alt M

[exposeclothing]

Your logo is 100% wide on your site. Is that what you wanted to do?

logo100.jpg

 

@media are media queries. They are used for smaller resolutions for tablets and phones.

 

For example @media (max-width: 479px) means, whatever code is in this media query will happen if resolution is smaller then 479px

 

In FF you can resize page for various resolutions by Ctrl Alt M

Hi Dioniz,

 

thanks for responding, strangley i didnt even do anything further, i simply gave up trying, and had to restart my computer after an install for some software, then i checked out the site, and it appears as though i managed to change it. Im unsure why it wasnt showing up before, as i cleared the cookies and the cache etc, is their something else i should be doing to be able to see the changes?

 

thanks for clearing that up regarding the @media files, that makes alot of sence now as to why they are there. i dont remember them being in the last prestashop templates.

 

Something else you may be able to assist with, im only familiar with the basics of coding, and took a break for a year, and now im back on it, an have noticed alot of the elements i inspect are showing up as 'clearfix before-after' and these seem to overide the element code that firebug says is responsible for items placement.

not sure if that makes sence, but when in firebug, i inspect the element - it tells me its in a particular line in a specific file, and while using firebug im able to see which line i need to edit to get my desired outcome,

i find the file, change it, then see its still the same, even though i changed the line firebug said was responsible for it,  is it common for firebug to mislead you in which file to edit, or is this another command over-ruling somewhere?

 

[dioniz]

Firebug is not misleading you. I'm using it all the time.

There may be more styles applied to one element and sometimes it depends on parent element which are usually displayed below your selected element so scroll down in firebug. Also you must make sure to check the path of file you are editing. Prestashop is overriding some css files with theme css files especially in modules. I suggest you to always use override files. That way after upgrade your styles stays unchanged.

 

You can read about clearfix here: http://stackoverflow.com/questions/9543541/what-does-the-clearfix-class-do-in-css

[exposeclothing]

never mind, it oviously did work, the change didnt show up until 25mins after i changed it lol... would you have any idea what is causing the delays?

[dioniz]

Try to clear browser cache with Ctrl+F5

[exposeclothing]

yep that works heaps better than clearing it through the options menu, thanks so much for that.

Although i have managed to get the logo and horizontal Nav menu where it needs to be (hoorray)

 

i just clicked on the category page (girls tab) and now its showing the center column underneath the "new products" section,

as it was on the left, i moved it to float to the right side of the page, now i just have to move it up .... hope i haven't messed it up to much lmao,

 

might have to re-install the global template and try doing alterations using the ctrl+f5 one at a time to see what code does which placement, as before i think i changed a few codes, as the clearing of the cache wasnt showing any changes straight away.. im such a blonde.

 

Ill put more trust in firebug, as see what i can do

[dioniz]

I see you fixed your girls page.

[exposeclothing]

noop, i just re-installed the global.css template to start again, and try to do it properly so i dont bugger up the rest of the coding LOL

I have no idea how i managed to change the header backgrounds but perhaps the way i did it was the reason the center column had misaligned. firebug is telling me to add the background on line 6059 on the global.css, and when i edit it in firebug it changes the background, so i head into Dreamweaver in the global file on line 6059 is

 

  .progress-striped .progress-bar-success {

    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));

 

 

 

do i replace all the above code to just;

 

progress-striped .progress-bar-success {

 

background-image: url ("..public_html/themes/default-bootstrap2/img/bg_blockmenus.png") repeat x ; }

Edited April 24, 2014 by exposeclothing (see edit history)

[exposeclothing]

is there an extension which allows me to open an individual file, and alter it (not permanatley) but just so i can try adjust the right section, in the right file , instead of firebug telling me its inherited, or a clearfix before/after. For example i could open the module folder, and edit a module.css and see what happens instead of firebug saying its in 4 different places.

[dioniz]

Firebug tells you the name of class you need to change so you need to find same name in global.css.

 

progress-striped .progress-bar-success { has nothing to do with header background as i know

 

Maybe Dreamveawer is reading line numbers some other way.

[dioniz]

If you change it in firebug and it works, it should work if you change same class in file.

Try to use some other editor like notepad++