1: #bubble {/*sets header bubble position*/
2: top:55px;
3: right:95px;
4: position:absolute;
5: }
6:
7: #bubble p {/*sets bubble text size & location*/
8: font-size:14px;
9: height:32px;
10: padding:2px 20px 50px;
11: }
12:
13: #container h1 {/*+ blog title size*/
14: font-size:45px;
15: }
16:
17: #content {/*sets right vertical line & header border top + width to reach sidebar*/
18: border-right:1px solid rgb(221,221,221);
19: width:708px;
20: border-top:5px solid rgb(225,152,50);
21: padding:20px 5px 5px 0;
22: }
23:
24: #searchform #s {/*+ width of search input box*/
25: width:113px;
26: }
27:
28: #sidebar {/*theme border invisible, + width for border top, apply border top*/
29: border-left:transparent;
30: width:181px;
31: border-top:5px solid rgb(225,152,50);
32: }
33:
34: #sidebar h3 {/*center sidebar titles*/
35: text-align:center;
36: }
37:
38: .commentlist li.bypostauthor {/*set my BG color to white to match the quote BG & adds a left & bottom border */
39: background-color:#fff;
40: border-left:#ddd 1px solid;
41: border-bottom:#ddd 1px solid;
42: }
43:
44: .commentlist li {{/*set the reader's BG color to my former BG color & adds a left border */
45: background-color:#f3f3f3;
46: border-left:#ddd 1px solid;
47: }
48:
49: .main p {/*- line height .25"*/
50: line-height:1.25;
51: }
52:
53: .sticky h2 {/*set title bg to white*/
54: background:rgb(255,255,255);
55: padding:0;
56: }
57:
58: blockquote {*/pulls quoted txt from right-margin*/
59: margin-right:50px;
60: }
61:
62: body {/*set title bg to white*/
63: font-size:14px;
64: }
65:
66: table.text {/*sets text table class w/border & padding*/
67: border:1px solid rgb(0,0,0);
68: padding:8px;
69: }
Update: 08/27/2010
Recent changes: [lines 38 – 47]
Master Style Sheet: The Journalist v1.9 CSS
Comment: Here we have 54 total lines compared to 203 total lines for my previous theme. That suggest there was much less to change with this theme. At this point, I do not have other significant modifications to the theme. To aid with the changed I wanted, I used Firefox’s Firebug—a tool for web development. The coding above is rendered by Code Snippet plugin for Windows Live Writer, created by:Leo. Of course, I use Windows Live Writer as a WYSIWYG blog editor.
Pingback: Blog refinements continue… « Cycling Experiences…
My original posting on the Vigilance Forum Board:
Comment from Drew Strojny, Administrator of the Vigilance Forum and theme creator.
To which I responded:
THANK YOU!
My pleasure. I hope it helps someone. I struggled to achieve my results and what others who want to modify their master.css to see here how it can be done. Come back as needed…
I appreciate you commenting.
Jim
thank you thank you thank you! you rock. this is exactly what I needed to get going on my css stuff! it’s nice to see it all written out with a description of what it does! my blog is finally looking the way i’ve wanted it to look for years
Hi Jenna, Glad to help and that my css made a difference for you. CONGRATS! Love your blog. It’s crisp & refreshing. –jim
p.s. If you learned of my css from the WordPress Forum, a comment there may send others to view my css page. I enjoy helping. Thanks again! –jaa
Thanks for taking the time to share this, Jim.
I’ve done a similar thing (share the CSS I’m using) on my blog (based on a Sandbox theme).
The next thing I need to learn how to do is see if there’s a way to detect the kind of browser that’s being used. The *@#& horizontal menu code I’m using only looks right in Internet Explorer, and not in Firefox or Chrome.
Anyway, cheers and keep up the good work.
Hi Tim,
Good for you–sharing, that is. Sometimes it can take a very long time to arrive at the element needed to modify what you want and then a bit more time to code the change. Thanks to the Internet, including forums, I’ve made most of the mods I want [if only I could make the blue background used in my archives drop down go away--for now, I've turned off the drop-down]. Anyway, sharing will save others time. I’ll pay a visit to your blog real soon.
I’m in the mist of making my css code more readable. I’m amazed at the difference ways browsers handle HTML. I can have a perfect rendering in one browser and problems with the other. I once thought speed and appearance differentiated browsers. As I code, I’ve learned it is more that that. I hope you soon find a solution to your horizontal menu code issue between browsers.
CHEERS to you also. In terms of visitors to our blogs, it helps to diversify.
Back to browser line width differences between my browsers…
Thanks for the visit and your comment!
Jim
Tim, I paid a visit to your css post. Cool stuff!!! Hey, I have remarks for each bit of css code I entered, without WordPress.com stripping it out. The rem has to be at the right place.
I wanted to comment at your site, but did not find a place to do so, thus a comment here. I’m going back to study more.
I tried, unsuccessfully, to control font size of my css display, but have not found the element. Firefox is displaying about an 8pt font and IE a 10pt font. Anyway…
Thanks for sharing!
Jim
Pingback: This is cool « Cycling Experiences…
Hey, I love what you’ve done with the vigilance theme.
I have what is probably a very stupid question. Your CSS chart about – what do those numbers correspond to? I tried looking at your site with firebug but I can’t really understand it.
What I’m most interested in is how you added the border around the blog on the left and right side and the line between the column and the sidebar.
Thanks,
Rhymes
Hello Rhymes,
Thank you very much. The numbers are just reference numbers for display only. If you have a question about a particular piece of code, you might say the code at line#?? and I’d go right to it. What you see is a facsimile of my CSS coding.
The border around the blog is a theme feature, on the Vigilance Option Page, set your background color using the hex number that gives you the color you want. For my blog, I’m using 4F532C.
The line between the content area and sidebar is css coding Lines# 44-48 on my public CSS page or:
#content /* inserts line, sets line color between content area & sidebar,equalizes spacing,03/18/09 */ {
border-right:1px solid;
border-color:#ddd;
padding:2px 10px 5px 0;
}
I hope I have sufficiently responded to your question. My pleasure and I’m glad you asked.
Jim
@ Rhymes
It is good to link you blog to your Gravatar so that others who see your comments may visit your blog. I’d like to do so, but can’t w/o finding “Rhymes” through and Internet search. Thanks! –jim
Here’s my blog:
It’s actually called “my blog” for now:) There’s nothing there yet.
I’m so new to blogging that the terminology is still foreign to me. I will make my name so it is clickable for future posts.
Rhymes
Thanks Rhymes!
To link your blog to your Gravatar [to make your name "clickable"] paste your blog URL to the “Website” field on your blog profile page.
The best to you and blogging. It is fun. I like have a relatively interactive blog and like watch hits in response to some action I’ve taken. The response is immediate. You can learn how to influence you readership. there is also a lot of responsibility that goes therewith.
Anyway, you did not come here for blogging lessons.
I hope the CSS information is useful. –jim
Blogging, CSS, it’s always good to learn something!
Thanks Jim for your assistance. I will be back to look at this several times Im sure!
You are welcome. Good luck with your blog. I’ll visit from time-to-time. –jim
Pingback: Google PageRank « Cycling Experiences…
All the comments above pertain to my last theme. Comments after this one will likely relate to my current theme–The Journalist v1.9. Thanks! –jim