Hey guys, I’m working on adjusting the size of my top banner, but can’t get it to adjust sizes properly.
The option for changing the banner height wasn’t in the theme options, so I hopped into the wp editor.
I found exactly what I needed, but changing the height of the banner distorts the rest of the site!
I’m using the default header style. This is the change I made in the editor:
Before:
container
*/
.td-container {
width: 1068px;
margin-right: auto;
margin-left: auto;
}
/*After:
container
*/
.td-container {
width: 1068px;
height: 45px;
margin-right: auto;
margin-left: auto;
}
/*
My technique — manually adding a height, technically worked. The banner become the exact size I wanted it to be, but along with the change, my logo stopped appearing.
In short, is there an effective way to adjust the height (not only width) of the top banner? Just to be extra clear, I’m talking about the banner in “class=”td-banner-wrap-full td-logo-wrap-full”
Thanks!
Hello,
You will have to edit a few more containers for it including the logo container and ad container.
Try this css instead:
.td-header-style-1 .td-header-sp-logo img{
max-height: 45px!important;
}
.td-header-style-1 .td-header-sp-logo{
height:45px!important;
margin: 0px 28px 0px 28px!important;
}
.td-header-style-1 .td-header-sp-recs{
margin:0!important;
}
.td-header-rec-wrap{
min-height: 45px!important;
}
Thanks.
Hey Bogdan,
Thanks for the input, I did what you said, and it solved half the problem! The pages isn’t distorting anymore. It’s getting closer to the size i need it to be.
To be a little more specific, here’s my site:
http://revgrapher.com/
I want the top banner to be this size:
http://techspot.com/
Thanks again for your help! Much appreciated.
Hi,
With the code I provided your header will become exactly that size: http://screencast.com/t/ltYqxHtG
Please let us know if you need further assistance with this.
Thank you!
Hey,
I tried it several times but I still can’t get it the way you’ve shown. If I were to send you my stylesheet, could you possibly make the change for me, while indicating where you made the change? This would be very much appreciated!
Thank you.
Hi,
You can use the theme panel for css adjustments. You do not have to edit style.css. Please add the code here:
http://screencast.com/t/p350ZKTuhc
Thanks.
Oh I see! Great I got it working, thanks!
I have one more question; how can I move the logo to the left by a couple pixels so that it’s always aligned with the first menu item?
Hi,
From the code I provided, in this part:
.td-header-style-1 .td-header-sp-logo{
height:45px!important;
margin: 0px 28px 0px 28px!important;
The very last number in pixels (28px right before !important on the second line of code). Decrease this number and your logo will move to the left.
Thanks.
Perfect! It worked!
One more relative question – How can I center the logo in the floating menu? For example when you scroll up on the website, the logo in the floating menu has too much space above it. How can I move the logo down a little? I want it to be centered (vertically) with the rest of the menu items. [ revgrapher.com ]
Thanks in advance!
Hi,
The logo is aligned already from the theme perspective: http://screencast.com/t/cY5UxpO5Pvp
It needs to be adjusted in a photo editor and centered from the image itself: http://screencast.com/t/cbcBUKZFQ
Thank you!
Thank you for the advice, I will adjust the actual image if i need to.
I have two other questions;
1. Is there a way that I can bring the top featured posts all the way up to the menu? I’m looking to fill the space between the menu and the first block of content (the featured posts).
The goal is to have it touching the menu, like on techspot.com
2. Is there a way that I can make a background like on techspot.com? Where the background is a certain color for the top, white background around the ad, and a lighter grey for the rest of the website. Is this type of background arrangement possible for this theme? I tried changing the background myself, but it leaves a white background around the content itself.
Thanks for the great support!!
Hello,
1)You can use this css:
.home .td-main-page-wrap{
padding-top:1px!important
}
I left 1 pixel so that it doesn not completely touch the menu. If you want it like that, simply set it to 0px
2)In order to achieve that effect, you can stretch the rows in visual composer and add background to them like so: http://screencast.com/t/ZJD3RAq6v and set a background color from design options.
Hope this helps.
Thanks.
Thanks for the css, it worked perfectly!
I have a new issue with the background though;
1. I want to remove the gap in the bottum of the “featured posts”. http://www.screencast.com/t/vmjsnwbnc.
2. I want to extend the second color throughout the rest of the website. http://www.screencast.com/t/95Wi3e6bX
All this without effecting the top color (featured posts background) and the white space around the ad.
3. Not sure about this one. If you look under the “featured posts” background, there’s no space between the ad (it’s just a jpeg for now) and the background color. How can I make my ad’s top and bottom padding look like this?;
http://www.screencast.com/t/kRIDp0Fs0dPm
Thank you!
Hello,
1) You can use this css to remove the bottom padding:
.td_block_big_grid_8{
padding-bottom:0!important;
}
But this will cause the block 1 below the big grid to stick to it so you need to assign an extra class to the row containing block 1 and use css with the class you assign like so:
http://screencast.com/t/iSvCwa5Dj6dX
.customrow1{
padding-top:20px!important;
}
2)You can assign a background color to the rest of the page by editin every row in visual composer lie you did the one with the big grid and assign that color to it.
3)Unfortunately I cannot see the ad at the moment. Please add it back in so I can inspect it and provide the proper code.
Thank you!
Hi,
Thanks, the first one worked perfectly!
for #2, I’m trying to set the same color to everything on the page, visual edit isn’t letting me change the color for the “latest articles” and down. Vis composer isn’t showing an option for changing the color to that (so it’s the same color as the block above it). http://www.screencast.com/t/7g7IMWLQmd http://www.screencast.com/t/KhXxzC4nrLyP
I’ll have to get back to you on #3 until I’m approved for ads.
Thanks!
Hi,
Yes,the latest articles section does not appear in the visual composer editor. You can change that with this css:
.td-pb-article-list{
background-color:grey!important
}
Thanks.
Hey,
That partially worked! But now the background around it is still white, and boxes in the content. http://www.screencast.com/t/81OfC8Yiruf
Would there be a way to fix this?
Thanks!!
Oh, I have another question;
How can I get my footer ad to go above the footer area? I want it to be below the “page count” buttons but above the footer background. Like this: http://www.screencast.com/t/OndCNeva80
If you check revgrapher.com , the closest i could get was it showing up above the footer info.
Thanks!!
Sorry one more question;
Is there a way I can get my featured box to look like this; http://www.screencast.com/t/bIdMEgwLk .. with a very thin white border between each post. If you look at the one on my site, each image (featured image on the post) is borderless.
Thanks.
I ran into another issue, my menu’s arrows and other symbols are showing up as an error. see here; http://www.screencast.com/t/zMA15SJe
Thanks!
I also have a question about how the site looks on mobile.
This is how it shows up: http://www.screencast.com/t/nBXHYsuBsEiN
1. Could I effectively move the logo (with black background) to the top? Why is that grey space there? If I chance it (move it up) on mobile, would it effect the desktop version?
2. How can I change those symbols to the left and right of the logo? If you scroll to the very bottom, all the social media icons show up as random symbols as well.
Thank you.
Wow, That is a whole lot of questions in one!
1) Unfortunately the latest articles cannot stretch to the whole width as they are not visual composer elements. There is no easy way to do it.
2) You cannot get the footer ad outside the footer. You will need to place the add in every post template, category template or page as the footer ad is meant to stay in the footer. It cannot create the necessary space for it in every other template that displays above it. If you want this custopmization you have a bit of work to do as you need to use this code:
Then place an ad in the custom ad 1 spot and then use it in every post template you use: http://screencast.com/t/pxohXgHczwym (these are in the root directory), the category pages: http://screencast.com/t/zgs5t556 , search results, and any other content you have on your site.
As you can see it’s not that easy.
3)You cannot add borders to the big grid as borders will increase the width with a few pixels and the grid depends on it’s fixed width. The layout will break if I add borders with css to it.
4)Please follow this topic to see how this issue can be resolved: https://forum.tagdiv.com/topic/chinese-social-icons/
5) a)It’s best to hide the section altogether and simply upload a mobile logo from the theme panel as there is no point in having 2 logos :
@media (max-width:767px){
.td-header-sp-recs{
display:none!important;
}
}
b) same issue as answer 4
Thanks.
