In the current version of Newspaper, I want to customize the header a bit and want to do it in the way that we are not putting custom code with the theme files. I don’t want to have to hard code anything if possible.
Here is what I need to figure out.
We like Style 10 as a base to start with.
For the top bar, we would like to have it a little thicker in height and black. In Style 12, the top bar that is under the menu is how we want to top area to look in Style 10.
Logo section, for this we like to have a colored graident background like you see in Style 12, but having that in Style 10.
Then for the bottom portion a menu with a white background and black letters.
Let me know what the best plan for this is. Thanks.
Hello,
Unfortunately everything you want done has to be hard-coded as there are no options to customize the header elements.
You can use css to do it on some extent.
You can change the color of the top menu in the theme panel: http://screencast.com/t/8kihBablNWXk
Then you can use this css to make it thicker:
.td-header-style-10 .td-header-top-menu-full{
height:50px!important;
}
.td-header-sp-top-menu{
line-height: 45px!important;
}
You can place the code in the theme panl -> custom css box.
For the gradient, you can use any image you want by setting a css background image:
.td-header-sp-logo{
background-image: url("http://i.huffpost.com/gen/2125210/images/o-EYES-facebook.jpg");
background-size:100%;
background-position-y: -400px!important;
}
You can change the url in the code to the url of your preferred image.
If you want a simple gradient you can use this code:
.td-header-sp-logo{
background: linear-gradient(lightblue, grey);
}
You can leave the bottom part as it is as the default is white background with black letters.
The final result will be like so:
with image: http://screencast.com/t/czZch5dwP
with gradient: http://screencast.com/t/qmNJb2sgC3BL
Thank you!
