How to add css style to text widget on FrontPage of Altitude Pro theme

[nhed]

I need to make some css style changes to the text widget on the FrontPage2. You can see the page here:

http://www.join-ed.com

With the help of Firebug, I have found the areas that need changing, but I haven't been able to figure out how to target just the widgets on the front page.

I've studied and reread the article "How to Customize a Specific WordPress Widget" by Laura but to no avail. I need a bit more help with the following:

1. How to determine the specific widget ID name and class name so I can target the elements and styles I need to change.

2. An idea of what the css code would look like as well as where to insert the css code in my style.css stylesheet.

Thanks for the help. All the very best,
Ed

http://www.join-ed.com

[frobn]

The widget ID is #front-page-2 and the class is .front-page-2. You shouldn't need to change anything in ID.

Insert your code at the end of styles.css

.front-page-2 {
/*css goes here */
}

Back up your file before making any changes.

Hopes this helps.

Frank

[nhed]

Hey Frank. Thanks. I'll post my results as soon as I try this later today. I super appreciate it.

I really do. Thank you.

All the best,

Ed

[nhed]

OK. I added the following code to my style.css theme file:

.front-page-2 {
font-size: 24px;
text-align: left;
padding-bottom: 0px;
padding-top: 0px;
line-height: 1.2;
}

However nothing changed.

When I make the change to this part of my css code found at line 1362 approximately, the font in the title of my article is changed from 30px to 24p but the changes are not limited to my FrontPage2 text widgets.

Any suggestions?

Thank you very much.
Ed

[nhed]

Sorry, the image above is the wrong one. This is the correct image. My bad.

[nhed]

OK. After a lot of experimenting and searching, here's what I came up with. I'm sharing this in case it helps someone else.

This tutorial was the key for me to figure out how to change the style of my widgets.

And this is the code that I added just in case it's a help to someone:

#text-38 h3 {
	font-size: 32px;
	font-weight: 500;
}

#featured-post-3 {
	border: 0 solid #909090;
	margin-bottom: 0;
	padding-bottom: 0;
	min-height: 490px;
	max-height: 490px;
}

#featured-post-3 h2 {
	font-size: 24px;
	text-align: left;
}

#featured-post-3 p {
	font-size: 20px;
	text-align: left;
	line-height: 1.2;
	margin-bottom: 0;
}

#featured-post-3 .entry-header {
	padding-top: 0;
}

OK. Over and out for now. Thanks for the help. And...

All the very best.
Ed

[Author]

Posts