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 » CSS (Cascading Style Sheets) » Change Qoute View

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

1Change Qoute View Empty Change Qoute View Mon Mar 29, 2010 4:17 pm

shamzblueworld

shamzblueworld
Registered Member
Registered Member
How to change qoute view in css and make it look more beautifull. Its terrible at my forum at the moment.

2Change Qoute View Empty Re: Change Qoute View Mon Mar 29, 2010 4:49 pm

ankillien

ankillien
Administrator
Administrator
Hi sham!

The CSS selector for quote box is .quote. You can apply any style to it like this...

Code:
.quote {
your : cssHere;
}

I can give you a copy-paste code if you tell me want kind of styles you want to apply to the quote box.

3Change Qoute View Empty Re: Change Qoute View Tue Mar 30, 2010 10:05 am

shamzblueworld

shamzblueworld
Registered Member
Registered Member
Thats great Ani, how about the qoute like ego-one?

4Change Qoute View Empty Re: Change Qoute View Tue Mar 30, 2010 6:04 pm

ankillien

ankillien
Administrator
Administrator
I don't know what kind of quotebox ego-one has :S
I'll go, check and give you the code.

5Change Qoute View Empty Re: Change Qoute View Wed Mar 31, 2010 1:11 am

shamzblueworld

shamzblueworld
Registered Member
Registered Member
Okay thanx. Its simple though, almost transparent but not completely with qoutations signs and looks very sleek.

6Change Qoute View Empty Re: Change Qoute View Wed Mar 31, 2010 9:07 am

ankillien

ankillien
Administrator
Administrator
Try this please..

Code:
.quote {
padding: 8px;
border: 1px solid #333;
background: #555 url(http://2img.net/i/fa/prosilver/quote.gif) no-repeat left top;
color: #FFF;
}

7Change Qoute View Empty Re: Change Qoute View Wed Mar 31, 2010 5:10 pm

shamzblueworld

shamzblueworld
Registered Member
Registered Member
Thank you anki. Now some modifications: Can the text in the qoute be centered with css? and how?
Plus I want to remove that outline of qoute area or maybe change it to transparent or any other colour.
Also I want the closing qoute sign aswell at the bottom right.
I want the text to be centered because the top left qoute sign is almost over the first letter we right in the qoute.

8Change Qoute View Empty Re: Change Qoute View Wed Mar 31, 2010 6:41 pm

ankillien

ankillien
Administrator
Administrator
I don't think you can put both starting and ending quote image since browsers don't support multiple backgrounds.

TO fix the text overlapping problem, you can add padding so that the quote image won't get overlapped by the text.

Use this code please..

Code:
.quote {
padding: 5px 5px 5px 12px;
background: #555 url(http://2img.net/i/fa/prosilver/quote.gif) no-repeat left top;
color: #FFF;
}

If it doesn't solve the problem, add this inside the braces...
text-align: center;

Hope that helps Very Happy

9Change Qoute View Empty Re: Change Qoute View Thu Apr 01, 2010 10:15 am

shamzblueworld

shamzblueworld
Registered Member
Registered Member
ok that didnt work and also the centered text was not looking so pretty. So can you please change the background to bottom left qoute sign? Thats will do I believe.

10Change Qoute View Empty Re: Change Qoute View Thu Apr 01, 2010 10:26 am

ankillien

ankillien
Administrator
Administrator
I just tried this code on a BB2 forum. It should work perfect.

Code:
.quote {
padding: 5px 5px 5px 25px;
background: #555 url(http://2img.net/i/fa/prosilver/quote.gif) no-repeat 5px 5px;
color: #FFF;
}

If you want to change the backgorund color of quote box, change this balue...

background: #555 url(https://2img.net/i/fa/prosilver/quote.gif) no-repeat 5px 5px;

11Change Qoute View Empty Re: Change Qoute View Thu Apr 01, 2010 3:38 pm

shamzblueworld

shamzblueworld
Registered Member
Registered Member
Yea it works fine. Thanx ani. And I'll change its balue ( Razz ) if required.

12Change Qoute View Empty Re: Change Qoute View Thu Apr 01, 2010 3:56 pm

ankillien

ankillien
Administrator
Administrator
You know I meant to say "value" xD

Glad I could help Very Happy

Solved | Locked

Sponsored content


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

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Change Qoute View

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