WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Customizing the Quote block

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Customizing the Quote block on Sat May 15, 2010 11:59 pm

latchy


Registered Member
Registered Member

Customizing The Quote Block
How to customize the quote block on your Forumotion forums



Quote block with quote marks


Today we are going to learn how to get a quote block like this

This is a test quote


First, you need to choose you image you wish to be displayed. Feel free to use this one.

Code:
http://i69.servimg.com/u/f69/14/29/05/13/quote10.gif


Then you need to paste this into your CSS., by going to:

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet.

Code:
blockquote {
   margin: 1em 1px 1em 25px;
   padding: 5px;
   background: #fafafa url("http://i69.servimg.com/u/f69/14/29/05/13/quote10.gif") 6px 8px no-repeat;
   border: 1px solid #DBDBCE;
   font-size: 0.95em;
   margin: 1em 1px 1em 25px;
   overflow: hidden;
   }
blockquote div {
    margin-left: 20px;
    }
blockquote blockquote {
   background-color: #EFEED9;
   font-size: 1em;
   margin: 0.5em 1px 0pt 15px;
   }
blockquote blockquote blockquote {
    background-color: #fafafa;
    }
blockquote cite {
   font-style: normal;
   font-weight: bold;
   display: block;
   font-size: 0.9em;
   }
blockquote cite cite {
    font-size: 1em;
    }
blockquote.uncited {
    padding-top: 25px;
    }


You can edit the image here:
Code:
background: #fafafa url("http://i69.servimg.com/u/f69/14/29/05/13/quote10.gif") 6px 8px no-repeat;


You can edit the background color here:
Code:
background: #fafafa


There is alot more customization available such as the border. Just use your common sense and you will figure it out Wink
Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://www.graphiccentral.org/

2Accespted Re: Customizing the Quote block on Sun May 16, 2010 9:16 am

Joel


Registered Member
Registered Member
wow! I think this tutorial is great!

http://www.advertisehotspot.info/

3Accespted Re: Customizing the Quote block on Sun May 16, 2010 1:51 pm

Fred100


Registered Member
Registered Member
Wow , pretty disruptive tutorial , really nicely give info , I saw few tuts of other users which were sometimes like "copy and paste this , you'll do it" , but yours was pretty nice mate Wink

http://www.art-castle.biz/forum.htm

4Accespted Re: Customizing the Quote block on Sun May 16, 2010 3:59 pm

latchy


Registered Member
Registered Member
Joel wrote:wow! I think this tutorial is great!

Thank you Smile

Fred100 wrote:Wow , pretty disruptive tutorial , really nicely give info , I saw few tuts of other users which were sometimes like "copy and paste this , you'll do it" , but yours was pretty nice mate Wink

Again, thank you Smile

http://www.graphiccentral.org/

5Accespted Re: Customizing the Quote block on Mon May 17, 2010 7:57 am

Joel


Registered Member
Registered Member
I think Sanket will surely accept this! Great job Latchy Very Happy

http://www.advertisehotspot.info/

6Accespted Re: Customizing the Quote block on Mon May 17, 2010 5:14 pm

dballerp


Registered Member
Registered Member
I have one question

Will this also work for code?

Awesome guide man

7Accespted Re: Customizing the Quote block on Mon May 17, 2010 6:15 pm

latchy


Registered Member
Registered Member
Joel wrote:I think Sanket will surely accept this! Great job Latchy Very Happy


Thank you.

dballerp wrote:I have one question

Will this also work for code?

Awesome guide man


What do you mean?

Thanks,
Rob Cool

http://www.graphiccentral.org/

8Accespted Re: Customizing the Quote block on Wed May 19, 2010 7:35 am

ankillien


Administrator
Administrator
Hi latchy!

Congrats, your tutorial is accepted.
Your contribution is much appreciated Very Happy

Tutorial Accepted

9Accespted Re: Customizing the Quote block on Wed May 19, 2010 7:16 pm

Jophy


Registered Member
Registered Member
Nice tutorial latchy Very Happy

http://www.socialtechforum.com/

10Accespted Re: Customizing the Quote block on Thu May 20, 2010 2:50 am

latchy


Registered Member
Registered Member
Thank you ankillien and zoids

http://www.graphiccentral.org/

11Accespted Re: Customizing the Quote block on Sun Jul 25, 2010 9:39 pm

Behavior???


Registered Member
Registered Member
i am not able to change the colour!

See my whole code

Code:
blockquote {
  margin: 1em 1px 1em 25px;
  padding: 5px;
  background: #7db7d4 url("http://i69.servimg.com/u/f69/14/29/05/13/quote10.gif") 6px 8px no-repeat;
  border: 1px solid #7db7d4;
  font-size: 0.95em;
  margin: 1em 1px 1em 25px;
  overflow: hidden;
  }
blockquote div {
    margin-left: 20px;
    }
blockquote blockquote {
  background-color: #7db7d4;
  font-size: 1em;
  margin: 0.5em 1px 0pt 15px;
  }
blockquote blockquote blockquote {
    background-color: #7db7d4;
    }
blockquote cite {
  font-style: normal;
  font-weight: bold;
  display: block;
  font-size: 0.9em;
  }
blockquote cite cite {
    font-size: 1em;
    }
blockquote.uncited {
    padding-top: 25px;
    }


I added it to the end of all my CSS commands

http://www.thedungeons.info

12Accespted Re: Customizing the Quote block on Sun Jul 25, 2010 9:43 pm

RockerMan


WebArtz Technician
WebArtz Technician
Hey,

Have you already got this element in your CSS?

If you have two copys, the first will over-ride the second Smile

http://www.graphics-post.com/

13Accespted Re: Customizing the Quote block on Mon Jul 26, 2010 11:04 pm

Behavior???


Registered Member
Registered Member
No, I dont have anything that says 'blockquote'

http://www.thedungeons.info

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Customizing the Quote block

Permissions in this forum:
You cannot reply to topics in this forum