[Theme: Classifieds Directory] Changing header style
-
We have been searching for a way to edit the theme in order to show it like this:
This is how the theme is right now:
http://www.guiabomdepreco.com.br/brasil/Any advice on how we can custom the theme header in order to show it like the image above
Thanks in advance.
-
Hi Sergio!
Let’s try. the first thing we will need to do is to reposition navigation bar. I would suggest you to move about 50px upwards. In addition if you want to have a little wide space to the right, this bar should not be 100%. 97% could be ok?
div#menu-primary, div#menu-secondary, div#menu-secondary1, div#menu-secondary1 .mega-menu { width: 97%; position: relative; top: -50px; }Less vertica space from logo to navigation bar and from logo to top. You could modify this space tuning your padding-bottom and padding-top values respectively. Your current values are 36 and 45 px.
#branding { padding-bottom: 25px !important; padding-top: 5px !important; }And then, search form and ‘Anuncie aqui’. take a look at last to statements: directory_search_location is for search bar and templatic_text for ‘Anuncie aqui’. You could modify the code, specially top parameter to adjust to your needs the vertical position of each one of those areas and margin-right parameter to fix the amount of space you want from them to the right border.
body .header_container .header-wrap .header-sidebar { overflow: visible; float: right; } #directory_search_location-1{ top: 130px; position: relative; float: right; margin-right: 5%; } #templatic_text-1{ position: relative; top: 0px; float: right; margin-right: 5%; }I hope this helps! Please ask us if there is something needing to be clarified or if you need to adapt anything else. :)
-
We added the codes as you suggested but we got the theme to be shown like this:
How can we move the search bar to below the “Anuncie Aqui” button?
Also, we added the codes through the menu Apperance > Custom CSS Editor, and I think thats a custom option due to our theme. Is it ok to ad the changes there or should we edit our theme-style.css file?
Another thing we would like to do is to create a dynamic menu, as shown in the first post(those “DDD 123” lines). We have not much of an idea on how to do this, if you know how we could shown them dinamically depending on where the user stands.
Thanks a lot for the help.
-
Hi Sergio.
How can we move the search bar to below the “Anuncie Aqui” button?
Just add a ‘!important’ key before float:right, in your directory_search_location-1 selector code, like this
#directory_search_location-1{ top: 130px; position: relative; float: right !important; margin-right: 5%; }You would probably like to move both (search bar and Anuncie aqui) a little bit to the left to be aligned with menu bar. If so, you should modify margin-right parameters.
Also, we added the codes through the menu Apperance > Custom CSS Editor, and I think thats a custom option due to our theme. Is it ok to ad the changes there or should we edit our theme-style.css file?
It’s ok like that. Exactly as you need to do! :)
-
Another thing we would like to do is to create a dynamic menu, as shown in the first post(those “DDD 123” lines). We have not much of an idea on how to do this, if you know how we could shown them dinamically depending on where the user stands.
You can select where to put your menu (there are different options depending on the theme used, like primary menu, social links…). But I am not sure you could choose whether to show it or not depending on the page you are. Just to try to imagine -if possible- an alternative way, could you be more explicit?
-
How can we align the “Anúncie Aqui Grátis” with the search bar to the white bar in the header?
Like this:
-
About the menu we would like to create in that area is pretty much like is shown in this image:
The text:
“DDD 11 – São Paulo e região 1.616.077
DDD 16 – Ribeirão Preto e região 128.363
DDD 12 – S. José do Rio Preto e região, 62.392
[…]”We would like to find a way to show the text above in that area, between the logo and the search bar and the button “Anuncie aqui GRÁTIS”(that translates to “Post an Ad FREE”).
And that text, we would like it to change according to where the user is. We are not sure if that is possible or not due to WordPress limitations. If not, finding a way to show that text in that area would help.
Thanks.
-
Hi
To align ‘Anuncie aquí’ and the search bar, you should adjust the margin-right parameter of #templatic_text-1 and #directory_search_location-1. This parameter defines the amount of space from those elements to the right border of its container, son the more space, the more to the left they will be.
I recommend you to try with 6.7%. So:
#directory_search_location-1{
top: 130px;
position: relative;
float: right !important;
margin-right: 6.7%;
}#templatic_text-1{
position: relative;
top: 0px;
float: right;
margin-right: 6.7%;
}I hope this helps. :)
-
About your menu.
If you want to change the content depending on the user location, you should need to modify php code, which is not possible with WordPress.com.
But you could show text in this area using the same widget you used for ‘Anunciese aquí’ and then modifying the position, as you made with #templatic_text, floating it to the left in this case.
I hope this helps.
-
By “wordpress.com” do you mean the wordpress CMS tool or the free version of wordpress?
Because we use both in different websites of ours. Perhaps that would not be possible on the free version, but on the other one, it would?
If you are not sure what I’m talking about, you can check our main website here:
http://www.guiabomdepreco.com.br/brasil/ -
The site http://www.guiabomdepreco.com.br/brasil/ is not hosted by WordPress.com and these forums are only for blogs/sites hosted by WordPress.org
And you should ask in the WordPress.org forum.
http://wordpress.org/support/ -
Typo:
and these forums are only for blogs/sites hosted by WordPress.org = and these forums are only for blogs/sites hosted by WordPress.COM -
staff-jeanpierreac: Please, always check that it is a blog hosted by WordPress.com
Cheers. :)
-
Actually, we have already posted there, and no answer so far.
https://wordpress.org/support/topic/theme-classifieds-directory?replies=1#post-7059080The user raulanton have helped us a lot so far. Thanks!
-
Actually, we have already posted there, and no answer so far.
https://wordpress.org/support/topic/theme-classifieds-directory?replies=1#post-7059080Sorry. Be patient while waiting.
-
We tried chaging the margin-right to 6.7%, though we noticed no change at all.
Here is all the code:
#branding { padding-top: 45px !important; padding-bottom: 36px !important; } body .header_container .header-wrap .logo img, .sticky_main #branding1 a img, body .header_container .header-wrap #branding img, #site-title img, #site-title1 img { max-height: none; } div#menu-primary, div#menu-secondary, div#menu-secondary1, div#menu-secondary1 .mega-menu { width: 97%; position: relative; top: -50px; } body .header_container .header-wrap .header-sidebar { overflow: visible; float: right; } #directory_search_location-1{ top: 130px; position: relative; float: right !important; margin-right: 6.7%; } #templatic_text-1{ position: relative; top: 0px; float: right; margin-right: 6.7%; }Any idea why that would be?
-
-
Hi Sergio.
I didn’t realize your post was a .org one.
Please Sergio, as @galois recommend you, be patient with your question at wordpress.org as we can not answer here to .org questions. There are differences between WordPress.com and WordPress.org that could mean a good solution for .com is not so good for .org.
I hope you understand that. :)
- The topic ‘[Theme: Classifieds Directory] Changing header style’ is closed to new replies.
WordPress.com Forums 