Quick-tip: adjust position of header image
When I get a private question that may be relevant to you I'll try
to post the answer here on the blog so others
can benefit.
Sometimes you need to adjust where your header background image starts, to either align it better with the repeat function, or to align it better with your body content. Here is how you do that. This will push your background image (that was set to "FULL WIDTH" in the network designer header section) over to the left see pictures. We will use the #wrapper-header-outer, that is where Socialgo Network designer places the FULL WIDTH image:
This is what it looks like without doing anything:
Now, you can also tell the image not to repeat with this code:
Sometimes you need to adjust where your header background image starts, to either align it better with the repeat function, or to align it better with your body content. Here is how you do that. This will push your background image (that was set to "FULL WIDTH" in the network designer header section) over to the left see pictures. We will use the #wrapper-header-outer, that is where Socialgo Network designer places the FULL WIDTH image:
This is what it looks like without doing anything:
This is what it looks like moved over 200px:div#wrapper-header-outer.has-full-header-image { background-position: 200px 50%; }
Now, you can also tell the image not to repeat with this code:
div#wrapper-header-outer.has-full-header-image {
background-position: 200px 50%;
background-repeat: no-repeat;
}
And, this is what it looks like:
5 Comments
Couple of quick questions:-
1. if i have a free plan, can i enter the custom CSS overides like in the above, in the 'ADs Custom HTML box' in order to override the header CSS for a standard SG template?
2. Is it ok to overide the height of the header in a CSS overide or even hide it on a standard SG template?
3. One big frustration i have with SG is that it is so inconvenient to change a Premium network style and layout wise because once it is live then you are pretty much stuck because you really don't want to take down the network while you play with new styling and layouts. Do you have any advice that can ease this situation?
That's it for now:)
Keep up the good work
SG adjust the size of the header with line-hight.. or by an inline image that you upload through the admin. They don't actually apply any size properties to the #header but you can...
- You can do a display:none on the header to get rid of it and do your own.
#header {
display: none;
}
I usually load my banner into the #header {background; url(images/myimage);
and then adjust the size of the banner using the line height just to keep it simple.. you can override it with this. (put!important)
div#header h1 a{ line-height:113px; }
You can also adjust the H!'s padding
div#header h1{padding:10px 25px;}
I put the logo into the H1 a
div#header h1 a{ background: url(mylogo.jpg) no-repeat 50% 50% ;}
hope that helps.
on the other issue.. I always use HTMLScout or some other app to grab the HTML and CSS off my SG site and work on it from my own hard-drive .. that way there is only a small testing period when i upload it to the SG admin.. where i tweek it.
Click here to sign up now.