- This topic is empty.
February 27, 2015 at 9:27 pm #196993
Hi! I can hardly call myself a coder, but I’ve gotten by with the help of Google. ;-) I’m building my real estate business website and have hit a snag that I’ve ended up spending way too much time on trying to fix.
I have a menu on my search pages that navigates between all the different search pages(advanced, map, mls id, and address). I want that menu to look like(colors, font family, etc.) it does on the Map Search page(here’s the link:http://idx.westlittlerockhomesforsale.com/idx/map/mapsearch) on ALL of the other search pages too(advanced, mls id, and address).
I have tried for three days to get each page the same as the map search with failing results. Any help is very much appreciated! :-)February 28, 2015 at 11:11 am #197004
The font family is already the same (Impact) as far as I can see. Are you just looking for a way to change the text color and hover interaction? I’m sure you are aware of browser developer tools – where one can right click the page and select ‘Inspect element’ to check the CSS that is being applied…February 28, 2015 at 11:40 am #197016
Thanks so much for your reply! After I posted this I was able to apply the correct font(impact) to all the pages on the menu.
Yes, so I’m just trying to fix the color of the hover and of the active tabs on the menu like it looks in the map search.
I am aware of right clicking and using “inspect element.” In fact, that’s how I’ve gotten as far as I have with my site. Somehow though, even if I have it the way I want it while “inspecting” it, once I copy and paste it into my stylesheet, it doesn’t work. Thanks again for taking the time to respond!February 28, 2015 at 12:39 pm #197020
No trouble, glad if I can help out at all. One thing that would be good to know about CSS is that the order in which the rules are read is quite decisive. So if you’ve placed you’re custom code ‘early’ in the document, there is a chance some other style that is placed below it will override it.
Maybe you could have a look at that? Before I start a monologue about the different stylesheets on the pages, which might lead more to confusion than it providing answers… only thing that really matters is to pick the last one and make sure there’s nothing further down that cancels the changes.February 28, 2015 at 1:59 pm #197024
Okay! I actually didn’t realize earlier instances of a code would be cancelled out by a later one so thank you for that information! :-)
Though, I’m not sure if it applies here.(I wish!!) The search pages I’m trying to customize are actually from a third party who provides me with all of the search data. SO, I’m working on a completely blank stylesheet to enter custom code for each page. So unless I need to somehow flag(I tried “!important” with no results) my custom code to overcede what the page already has, order definitely isn’t the problem. :-(
Here is a link to the custom code that I have on the Map Search page(the way I want the other pages to look):
http://codepen.io/anon/pen/gbKdmBFebruary 28, 2015 at 3:28 pm #197026
Okay, that gives some insight. I was wondering what file what applying what style exactly. From what I can see, it is a matter of the order of style being applied after all – I’m concluding your custom code is parsed through idxstyles.php, this is the very first link inside the HTML document after the
headtag (you can see it by right clicking and selecting ‘Page source’). It works for the map search page because there is nothing overriding the style there after it. But on the other pages, a few lines down there is a file called mobileFirst.css that is adding new style to what has been set before. If you are able to make the changes there or place another link to a custom stylesheet in the HTML doc after this file you could have the ‘final word’ about how it should look.February 28, 2015 at 6:21 pm #197029
Gotcha!! Yeah, that mobileFirst.css is the “template” that I chose for those pages. I just looked all over everything that I have access to and I don’t seem to have a stylesheet for that template. And I can’t figure out a way to get the changes I want to make below that mobileFirst.css.
I was thinking maybe an inline style might fix it, but I haven’t done enough research on that yet to even pretend to know how to do that! At least I know what the problem is now–thank you again for all you help! :-)February 28, 2015 at 8:56 pm #197034
You’re welcome. Adding a link inside the head to a custom stylesheet is probably something to be done through WordPress itself. I am not too familiar with that though. But if you run into trouble, there are more than a few members here that have expertise on the subject.
An alternative option would be to directly edit the HTML document with a text editor. You would then download the file from your site with FTP, make the changes and upload it again.
Good luck with further development in any case. :-)
- The forum ‘CSS’ is closed to new topics and replies.