BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Styling Blockquotes
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Tue Feb 13, 2007 10:47 am    Post subject: Styling Blockquotes Reply with quote

Hi John, I'm looking for some advice on how I might go about styling the <Blockquote> tag in my posts. Where do I begin, and which template do I need to edit?

Would it be possible to implement something like this approach?

I have tried pasting the html into the body of a post and adding the CSS to my Style Template. It didn't work, was this incorrect? If this approach isn't right could you please suggest a way I might approach this type of thing that would work.

Thanks mate!
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Feb 13, 2007 1:30 pm    Post subject: Re: Styling Blockquotes Reply with quote

Changing the style of the BLOCKQUOTE tag is done the same way you style anything in CSS, by updating your Custom CSS in the style template. Since we know you already know how to modify your style template, we need some more information.

Whenever you have a support question that is of the structure "I tried X and it didn't work," the next thing you need to note is "The results of my efforts are here" and link to where we can see your attempt at doing that thing. That's really the best way for someone to diagnose what went wrong...

Remember this mantra:
  • Tell us what you did. (In as much detail as possible! Step by step!)
  • Tell us what you expected to happen.
  • Tell us what happened instead.

Hook us up with that info and we'll be glad to look at your site (tell us which one!) and try to figure out where you went wrong.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Tue Feb 13, 2007 3:38 pm    Post subject: Reply with quote

The site I was refering to was dissident vox. The code I pasted into my Style sheet looked like this;

blockquote {
border : 2px solid #000;
width: 200px;
float: right;
margin: 0px;
padding: 10px;
background-color: #ccc;
quotes: "\201C" "\201D";
}
blockquote:before { content: open-quote; font-weight: bold; }
blockquote:after { content: close-quote; font-weight: bold; }

The code is derived from the link I mentioned in the post above.

I also pasted the following html directly into the html code section of the post. It's the current top post on the Main Page.

<blockquote cite="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1">
<div>

As I said nothing happened. Sad

Apologies for my previous lack of specificity! Rolling Eyes
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Feb 13, 2007 6:37 pm    Post subject: Reply with quote

The code I pasted into my Style sheet looked like this

Actually when I go to your style template, it doesn't look like that, the only references you have for blockquote look like this:

Code:
blockquote {
  background: transparent url(quoleft.png) left top no-repeat;
}
blockquote div {
  padding: 0 48px;
  background: transparent url(quoright.png) right bottom no-repeat;
}


So if you want to use the code you referenced in your post here at the forum, I'd suggest you remove the existing references for blockquote in your Custom CSS and replace them with the code you do want to use.

FYI, if you want to reference an image in your CSS, you will need to reference the full URL; when you don't the browser will assume the image is located in the same directory you are currently viewing which will not be the case.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum