Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   styling default hr tag (http://forum.bytesforall.com/showthread.php?t=20106)

rainbow Apr 11, 2013 01:35 PM

styling default hr tag
 
I have restyled my default hr tag, and would like to also apply my customized style to the horizontal line that Atahualpa automatically inserts at the end of pages and posts. For example, on this page: http://mihansa.net/also-with-yun-jung-hun I'd like the horizontal line above the Share this: buttons which was inserted automatically by the theme to match the two horizontal lines I inserted manually above the two h5 headings.

I have not been able to find the styling for this line. I know a little html, but no php, and it doesn't seem to be in the obvious files (style.css, css.php).

Can anyone help me identify the element, and compose the code I need to use to style it (hopefully I can do this in html/css inserts)?

Many thanks in advance!

lmilesw Apr 11, 2013 02:00 PM

Just use Firebug to determine the selectors.

rainbow Apr 13, 2013 02:23 PM

Easy for you to say! Firebug is NOT a friendly tool for the html novice. However, using the windows element inspector, I was able to determine that the line styling I'm trying to copy is actually a top border on the Share This box. Here's the styling for the box.

div.sharedaddy div.sd-block {
border-top: 1px solid rgba(0, 0, 0, 0.13);
padding: 10px 0px 5px;
margin: 0px;
width: 100% !important;
}

I'm not quite sure how to reframe this in css as a line style. I don't see a color at all (which may explain why it shows up black in FireFox and gray in IE). But the weight is the main thing I want to copy to my HR style. How would I convert that "0.13" to css? 0.13 of what??

You can see the difference between the two lines here:
http://mihansa.net/my-korean-drama-lists/#bottom

I like the line just above the buttons (in FireFox, anyway. Not so much in IE), and I'd like to style my hr to match (yes, globally).

juggledad Apr 13, 2013 03:26 PM

RGBA is a CSS3 feature IE8 and lower don't support it. The 'a' is the alpha'
(this was found doing a quick google search using 'css rgba')

lmilesw Apr 13, 2013 05:16 PM

The reason I mention Firebug as there is often no "answer" to a particular question and using Firebug to virtually style items is what I do all the time to test styling.

In your case I would just try some gray styling for the hr tag such as
HTML Code:

hr {
color: #ccc;
background-color: #ccc;
height: 1px;
}

I found this example via a Google search for "styling hr tag" and clicked a link that said Styling <hr> with CSS

It is really important, especially for HTML novices, to learn how to search and experiment.

Here is another bit of code to try again determined via Firebug.
HTML Code:

hr {
    height: 1px;
    background: #DBB988;
}


rainbow Apr 14, 2013 09:12 PM

Yes, I actually tried pretty much that same code (my html skills are good enough for that much), but I couldn't get the line thickness to match - my styled hr line, even at 1 px was heavier than the box border I was trying to match.

I did google line weight, less than 1 px, etc., but everything I found said the line thickness couldn't be less than a px, yet it obviously can, 'cause you can see the border line is thinner than the 1 px hr line.
:confused:

lmilesw Apr 16, 2013 02:02 PM

How about this code?
HTML Code:

hr {
    border-top: 1px solid #DBB988 !important;
}



All times are GMT -6. The time now is 06:11 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.