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

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 Sun May 16, 2010 1:29 am

latchy

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.
Customizing the Quote block Quote10
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 >> Customizing the Quote block Images_couleurs 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 Sun May 16, 2010 10:46 am

Joel

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

http://www.advertisehotspot.info/

3Accespted Re: Customizing the Quote block Sun May 16, 2010 3:21 pm

Fred100

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 Sun May 16, 2010 5:29 pm

latchy

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 Mon May 17, 2010 9:27 am

Joel

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 Mon May 17, 2010 6:44 pm

dballerp

dballerp
Registered Member
Registered Member
I have one question

Will this also work for code?

Awesome guide man

7Accespted Re: Customizing the Quote block Mon May 17, 2010 7:45 pm

latchy

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 Wed May 19, 2010 9:05 am

ankillien

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 Wed May 19, 2010 8:46 pm

Jophy

Jophy
Registered Member
Registered Member
Nice tutorial latchy Very Happy

http://www.socialtechforum.com/

10Accespted Re: Customizing the Quote block Thu May 20, 2010 4:20 am

latchy

latchy
Registered Member
Registered Member
Thank you ankillien and zoids

http://www.graphiccentral.org/

11Accespted Re: Customizing the Quote block Sun Jul 25, 2010 11:09 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 Sun Jul 25, 2010 11:13 pm

RockerMan

RockerMan
Technician
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 Tue Jul 27, 2010 12:34 am

Behavior???


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

http://www.thedungeons.info

Sponsored content


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