- This topic has 11 replies, 6 voices, and was last updated 9 years, 7 months ago by
.
-
Posts
-
I've just setup my 2nd WP site and am in that horrid stage of trying to fine tune the styles etc.
I have firebug installed on firefox but it is still not making it very easy for me to identify which style a certain element is using so that I can then go and change it in the style.css.Can anyone recommend the easiest way for me to either highlight text or an object on the page and then be able to identify which style is formatting it from the style.css??? I'm sick of editing various settings which I THINK might be what i need to change only to find it doesn't work and then have to change the setting back and keep searching.
http://www.beltan.com.auI don't use firebug any longer. Firefox has it's own built in tools. I right click on the element I want to view and select inspect element. The source code opens in a window on the bottom left and the style opens in a window on the bottom right.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?It took me a while to get this one figured out as well. You will have to create a new style specifically for that element, but that means you have to know what WordPress is telling the browsers to call that element, and it won't be anything that is currently in your style sheet. You can use Google Chrome's element inspector (see https://developer.chrome.com/devtools/docs/dom-and-styles). You right-click on the element, select "inspect element" at the bottom of the window, and look at the bottom left window to see what the element has been named by WordPress. On the right will be your style sheet, which will not be adequate by itself and will have to be modified to add styling just for that element. Here's an example: I used Brad Dalton's 3-widget header tutorial to replace the header in a child theme with three inline widgets by modifying functions.php. In my stylesheet, I added the styling for .featured-widgets per Brad's tutorial. Then I ftp'd the updated functions file and stylesheet. Then I dragged a text widget into each space and inserted my text - name inn the left widget, phone in the middle, directions link in the right.
Then I looked at the site in Chrome, and of course all three widgets looked terrible. So I right-clicked on each widget in turn, selected "inspect element" and saw that WordPress had named the first widget, "#text-14.widget.widget_text" So I styled that widget separately, meaning I added more styling to what was already given by .featured-widgets. Same with the other two widgets, renamed illogically "#text-3.widget.widget_text" and #text-4.widget.widget_text" So I put new styles for each one, individually, right under ".featured-widgets." After more tinkering, they eventually looked fine.
You have to remember to use the exact id WordPress has given each element - i.e., a div id "#"or a class id "." and be sure to put it in the right place in the stylesheet - right below the element that applies to the whole thing according to the stylesheet on the right side of the elements inspector at the bottom of the screen. If the element then looks terrible on a cell, you will need to drop down to the bottom of the stylesheet and add more styling for that element or others surrounding it using mobile breakpoints. (Don't ever add mobile styling in the middle of a stylesheet - a mistake I have also made.)
Also, if you are really, really stuck on fixing up a widget, try using Black Studio TinyMCE Widget instead. It's free at https://wordpress.org/plugins/black-studio-tinymce-widget/ and will let you add html and styles to just that widget.
Personally I use Chrome. right click inspect element. It it really the easiest once you get used to it. It even tells you what line in the style.css
My techy blog WordPress and stuff badlywired.com
Be careful with that Suuzen, if you ever change widgets or types of widgets in the specific widget area your styling will break because the id will change. Generally for this type of styling you'll want to style the widgets more generally (as usually you'll style all the widgets in say, footer, the same) so you'd apply to .footer .widget for a very psuedo / rough example. Also people tend to stumble on they need the color in their styling directives for many themes for a bit a more specificity.
Hi, Belinda,
Strangely enough, I like the element inspector of Internet Explorer 11. It's quick and easy to find and copy what I need. Chrome and Firefox are good, too, but my personal preference for ease is IE.
For inspecting and designing I like Microthemer: http://themeover.com/
They have a trial version to test but you can double click and inspect elements and apply styles in a WYSIWYG interface. I'm not an affiliate - just a fan, same as with Genesis 🙂Thanks, Coral Sea IT, but I use specific item identities because I don't style all my inline widgets the same at all - some contain logos, some contain non-logo images with rollovers, some contain multiple lines of text, some contain search boxes, some contain links with explanatory text below. It drove me crazy trying to write css for padding, margins, font color and size, etc. the way I would for a non-content-management site, until I determined that the only way it could be done was to use the widget-specific WordPress id's and then write the css for screen and mobile breakpoints. Specific-item widget id's are also really helpful for styling list items in vertical expanding and collapsing jquery menus, where you may want more padding or margin to separate the top list item of the menu from a menu title.
I absolutely agree, though, that if you change widget types the WordPress id will change and you'll have to get the new WordPress id to rewrite the css. If you just alter the content of a widget, you can use the same id but you'll still have to rewrite the css. And if widgets in the layout differ between pages, you'll have a lot of css to write, and you'll have to be very careful to write tight css so as not to bloat the styles file and slow page loading. And of course, you can't safely do any this on a stock child theme that could be updated; all of this css customizing only really works on a custom theme. Your points are very good ones for anyone who is entering their own content in a stock theme that could change.
Good deal Suuez, for your use case that makes sense. We've been experimenting with Child of Child Themes to protect against theme changes and provide some abstraction within a 'wordpress' way, some pros some cons but we're getting there. Not quite baked yet, but when ready we'll post on it.
Ok i've looked using Chrome and can see that the element is referenced as entry-header but there are multiple entries for this in the style.css and I've tried changing the padding on multiple entries with no change to the amount of space left around my main heading.
I simply want to reduce the amount of space between my headings and the line/text and also I want to remove the line from under "Easy ways to contact me" which is in the upper right section of the header.
I also want to increase the header image size but cannot find where I can do that.
Coral Seas IT, I really like your child-of-child concept. I look forward to reading your post when its ready!
Belinda, what theme are you using? It's difficult to provide any detailed suggestions without something to see.
Belinda, you might also want to try alternations to margins and borders - sometimes extra vertical spacing exists due to one of these. Line-height can also influence vertical spacing. You can test alterations to any or all of these directly in Google Chrome’s element inspector, which might allow you to pinpoint the change needed before you alter your css file.
- The forum ‘General Discussion’ is closed to new topics and replies.