Forums

WordPress › Support » Themes and Templates

CSS Customization Problem (4 posts)

  1. encompassmore
    Member
    Posted 1 year ago #

    I am trying to create a custom class for my Shoutbox themed website, but am having difficulty making it work. Here is the steps I have done:

    I have inputted this code in my custom.css file:

    #quote-container
{
	margin: auto;
	width: 620px;
	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 I have added this code in the content area:

    <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>

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

    Any thoughts on what I might be doing wrong? Any help would be much appreciated. Thanks!

  2. Jose Castaneda
    Member
    Posted 1 year ago #

    The one issue I can see right off the bat is that the width you are trying to use for the quote will be cut off and second is the fact that there is no id or class in any of your css that I could find.

  3. encompassmore
    Member
    Posted 1 year ago #

    jcastaneda,

    Thanks for the reply! As far as the width, that is the width of the slideshow on the page, so that should be OK.

    As for the id or class, could you, perchance, give me an example of what you mean. I am new to css. To me, I have the Id as "quote-container" and the class as "thequote" and "theauthor."

    Should I be doing something more? Thanks for you help.

  4. encompassmore
    Member
    Posted 1 year ago #

    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 designer dampen certain customizations?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags