Adding a new style « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Shoutbox

Adding a new style

13 posts from 3 voices

Started 1 year ago by encoompassmore
Latest reply from encoompassmore
This topic is closed
This topic is resolved

Tags:

encoompassmore
Member

Hey,

I am trying to add a specific style that I can use on particular content within my posts. I am experimenting in the style.css file. Here is what I am attempting to add to accomplish this:

.thequote{
font-family: Arial, Helevtica, Verdana, san-serif;
font-weight: bold;
letter-spacing: 0px;
font-size: 20px;
font-style: italic;
}

I would like to add <style="thequote">CONTENT HERE</style> to the content and have it reference this style. Thus far I have had no success. I am adding the script to the right css file? I am missing anything in the script itself? I am a bit stymied. Thanks in advance for your help!

Posted 1 year ago #
encoompassmore
Member

OK, I have varied my approach with no luck. I have added this code to the custom.css file:

#quote-container
{
margin: auto;
width: 650px;
background: #B01327;
padding: 5px
}

.thequote {
font-family: "Times New Roman", Times, serif;
font-size: 20pt;
color: #FFFFFF;
font-weight: bold;
}
.theauthor {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
font-style: italic;

And added this to the post:

<div id="quote-container">
<p class="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
<p class="theauthor"> - Lady Marguerite Gardiner Blessington</p>
</div>

And the result is no change to the content:
http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

Help!

Posted 1 year ago #

encoompassmore
Member

I just tried this experiment to see if this worked:

<html>
<head>
<style>

p#exampleID1 { background-color: blue; }
p#exampleID2 { text-transform: uppercase; } 

</style>
</head>
<body>
<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>
<p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.</p>
</body>
</html>

Result here:
http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

The blue background does not work, but the transform case does. Can a theme dampen certain customizations?

Posted 1 year ago #

Kriesi
Key Master
checking your source code it seems your style tag is a little messed up:
```
<style>
<p>p#exampleID1 { background-color: blue; }
p#exampleID2 { text-transform: uppercase; } </p>
</style>
```
should read:
```
<style type='text/css'>
p#exampleID1 { background-color: blue; }
p#exampleID2 { text-transform: uppercase; }
</style>
```
If you want to add css modifications I would recommend to add them to the custom.css file in css. You dont need to worry about style tags, paragraphs etc within the css file
Posted 1 year ago #
encoompassmore
Member
Kriesi, Thanks for the reply back! Yes, you are correct. If I added that it corrected the problem. Unfortunately, that was just an experiment that I was trying because the code I added in custom.css was not working. The real issue is what I started the post with:
```
#quote-container
{
margin: auto;
width: 650px;
background: #B01327;
padding: 5px
}

.thequote {
font-family: "Times New Roman", Times, serif;
font-size: 20pt;
color: #FFFFFF;
font-weight: bold;
}
.theauthor {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
font-style: italic;
```
And added this to the post:
```
<div id="quote-container">
<p class="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
<p class="theauthor"> - Lady Marguerite Gardiner Blessington</p>
</div>
```
And the result is no change to the content:
http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

Any thoughts on what I am doing wrong in the custom.css file? I will continue to experiment. Thanks!
Posted 1 year ago #
Devin
Moderator
Hi encoompassmore,

I'm sorry none of us has responded until now. But it looks like you are on the right track!

I would suggest adding your css to the custom.css file located in your themes css folder. That way, even if you update the theme the css changes stay.

The only change I would suggest is making quote-container a class. Then your HTML you would add into the HTML editor would be:
```
<div class="quote-container">
<p class="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
<p class="theauthor"> - Lady Marguerite Gardiner Blessington</p>
</div>
```
Hope that helps :)

Regards,

Devin
Posted 1 year ago #

encoompassmore
Member

Thanks for the reply. I have been playing with the code and have now got this to work by putting code directly in the post:

<style type="text/css">
#quote-container {background: #937CB9; margin: 0px 0px 0px 0px; padding: 15px 15px 15px 15px; border: 2px solid #7C689B}
p#thequote {font-family: Helvetica, Arial, serif; font-size: 20pt; color: #333333; font-weight: bold;}
p#theauthor {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; font-style: italic;}
</style>

<div id="quote-container">
<p id="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
<p id="theauthor">- Lady Marguerite Gardiner Blessington</p>
</div>

Result:
http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

But when I try and put any version of the code in custom.css, it does not work. This is what I have tried:

#quote-container {background: #937CB9; margin: 0px 0px 0px 0px; padding: 15px 15px 15px 15px; border: 2px solid #7C689B}
#thequote {font-family: Helvetica, Arial, serif; font-size: 20pt; color: #333333; font-weight: bold;}
#theauthor {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; font-style: italic;}

Could you tell me what I should be putting in custom.css, because everything I try does not work for me... I really appreciate your help! :-)

Posted 1 year ago #

Kriesi
Key Master
it seems for whatever resaon your custom css file was removed from the header.php file. please make sure that it is included in your head like this:
```
<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/custom.css" type="text/css" media="screen"/>
```
Posted 1 year ago #
encoompassmore
Member
That helped some. I am able to have the content styling executed like I want. The quote container does not work, however. Here is what I put in custom.css:
```
#quote-container {background: #937CB9; margin: 0px; padding: 15px; border: 3px solid #7C689B; border-radius: 10px;}
#thequote {font-family: Helvetica, Arial, serif; font-size: 20pt; color: #333333; font-weight: normal;}
#theauthor {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; font-style: italic;}
```
and here is what i put in the post:
```
<div id="quote-container">
<p id="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
<p id="theauthor">- Lady Marguerite Gardiner Blessington</p>
</div>
```
Here is the result:
http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

There should be a light purple box around the quote with rounded corners...

It is so weird, because when I put the css code directly in the post, it all works. It is only when I put it in the custom.css file that it does not work. Should I be amending the code in any way? Thanks for your help!
Posted 1 year ago #
Devin
Moderator

Hi Hi encoompassmore,

Try disabling Total Cache and see if that allows the css to load properly.

Posted 1 year ago #
encoompassmore
Member

Yes, now it works just fine! Thank you! But I have to say, what the heck? Why did Total Cache do that? I reactivated it once the css worked properly, and the css still works fine. Did I need to empty the cache in order for my browser to see the changes?

Any additional insight would be helpful so I know how to handle this type of problem in the future. I appreciate your help!

Posted 1 year ago #
Devin
Moderator

Yay! I'm glad that worked. It was such a weird error and will most likely not happen again. Cache can be a little finicky, so just keep that on your mind if you run into an issue later on that you can't really seem to nail down the root cause of.

Posted 1 year ago #
encoompassmore
Member

Thanks for you help and insight!

Posted 1 year ago #