Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello,
At first I want to thank SiteOrigin for a nice free theme. I am loving it and would like to upgrade to premium after a while.
I am an amateur in WP and building a site. I have inserted a icon and a text line in Header section. What I don’t understand is- the icon and the text are sometimes getting up, sometimes getting down. Thru couple of refresh it can be seen. I am not sure if I am missing something.
Here is the address: http://hutbazaar.com.au/hbwp/
Thanks in advance.
Hi AZM
Thanks for running Vantage.
Try inserting the following into a Custom CSS module like the one included with Jetpack:
header#masthead hgroup { padding-top: 45px !important; padding-bottom: 45px !important; }Adjust 45px as required.
Hello,
Thanks a ton for the answer!
I am a bit confused. My understanding is to insert your code into a custom CSS plugin. I have one named Simple Custom CSS, which I am using for my own CSS. Do you mean this? I did insert, but it’s still the same.
As the site is kept private you can check with user: test and pass: test123
Thanks for your time
That’s right, you can insert the CSS into any Custom CSS plugin/module.
I’ll check shortly.
Try this:
header#masthead hgroup #header-sidebar { padding-top: 35px !important; padding-bottom: 35px !important; }Unfortunately, it’s not working either.
No problem; when you will have time, can have a look in the site
Thanks again
Is your Custom CSS in place? Please leave it saved so I can see it in effect.
Please remember not to edit style.css as any changes there won’t survive upgrade.
Yes, it is in place in the custom css plugin and saved with your last code inserted.
No, I am not editing the style.css folder
I can’t find your Custom CSS in the page source. How is Simple Custom CSS adding it’s code? Into the Head? Can you see the snippet you’re saving in the page source?
It’s in place now, I can see in inspect element.
I put a dot before. no update, still same.
Super, I see it. Please remove the second t from the first !important. So it says !importantt now, just make that;
!important;
Yes, removed the t. I added that to check the code becomes in place or not. :)
Cool, that selector is now taking precedence. Which OS and browser are you seeing the shift happen in now?
OK.. I just checked in couple of ways.
1. Up/Down Shift happens in Chrome in Win 7. Checked in two diff machines; One is Win 7 laptop, Other is Win 7 desktop.
2. Does not happen in Firefox. Checked in that 2 machines and page looks exactly same in both
3. Does not happen in IE in my laptop and looks same like firefox.
4. Does not happen in IE in my desktop, but looks bit different from firefox/IE in my laptop. That haeder section( image & the text) there is permanently placed closely to the edge of the top, looks loke all padding in bottom.
Sorry if I am making it messy.
I think it’s almost 90% done and I am happy! :D
Is it possible that the line breaks are the issue? Try removing the breaks
and rather use padding-bottom in the selector I sent. Does that help?
No problem. I’m sure we can fix this.
OWAO! IT’s fixed!!! The line break was the issue. I added those as it was going down.
Great! Man!! How did you do that!!!! I have to learn CSS! :D
Thanks.. Thanks a lot.
Awesome, glad that helped!
For sure, a little CSS is perhaps the most useful skill you could pick up for light customisation of themes.
Here are a couple of useful links:
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
http://www.codecademy.com/tracks/web
http://css-tricks.com/
http://learn.shayhowe.com/advanced-html-css/complex-selectors/
All the best.
Thanks for the links. Looks very helpful.. Will have a look.
:)