Solved

Overruling a too fancy block quote style....

Posted on 2013-12-22
4
226 Views
Last Modified: 2013-12-26
Hello CSS experts,

I have a style that controls blockquotes that I want to override.  One of the issues is it calls for an image.  And I am not sure how to override an image to have no image.

Here is most of the css.  There may be other css scattered throughout the assorted css files on the site (including one in bootstrap.css) but I think if I can override the below style (found via firbug) , it will get me close enough to the results I want.

blockquote:before {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    content: url("blockquotes.png") !important;
    margin-right: 15px;
    position: relative !important;
    vertical-align: super;
}
blockquote:after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
}
blockquote {
    background: none repeat scroll 0 0 #CCCCCC;
    border-left: 10px solid #8F8F8F;
    border-radius: 0 10px;
    color: #544C4A;
    font: italic 12pt/1.2em Georgia;
    margin: 10px !important;
    padding: 10px !important;
    text-shadow: 1px 1px 1px #FFFFFF;
    width: 60%;
}

Open in new window


I don't want to modify the above, I want a new rule to over ride the above.  I think I have to override each element in the above, right?
I.e.
 vertical-align: super;    -- I assume I change that to
 vertical-align: normal;
padding -- I can change that to whatever.  ie. 0px
etc.

Most I can figure out, however things like:
  content: url("blockquotes.png") !important;
  and
    position: relative !important;

even font-color -- how do I say use default body font OR whatever font may or may not be currently used in a controlling div or style that may already be controlling the overall font color (and size) for this section of a page.  Is this what "inherit" is used for???

So, in summary, what I am asking for is for a blockquote set of rules that will overrule and will, where appropriate, default to a style which may be already controlling the "look" of a div etc.  I would like the blockquote to be as generic as possible.

And how should I deal with !important  ???

But maybe I am over explaining this --  let's keep it simple, first! :)

Thanks!
Rowby
0
Comment
Question by:Rowby Goren
  • 2
  • 2
4 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 39734879
blockquote:before {
    background: none !important;
    background-color:none;
    content: "" !important;
    margin-right:0;
    position: static !important;
    vertical-align: baseline;
}
blockquote:after {
    background: none !important;
}
blockquote {
    background: none repeat scroll 0 0 #CCCCCC;
    background-color:none;
    border-left: 0;
    border-radius: 0 0;
    color: inherit;
    font: inherit;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: none;
    width: auto;
}

Open in new window


that's a start. If something is not working, then please post a link.

make sure your rules come after the other rules, then any !importants will be overridden with your own !importants. And if there is more specificity on those selectors than you posted here, make sure you also include those in your new rules.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39734925
Hi

I am uploading a clone of the site and will be able to post a link later today.

(It's a big site to the upload to my temporary development server is going to take some time.

Thanks for helping and we'll resume after the site is uploaded for your reference.

Thanks

Rowby
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39736091
hey Rowby,

I'm going away for 3 weeks, so when you are ready, you should request attention for this question.

Happy holidays,
Koza
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39740739
Thanks Koza,

That "fixed" it!

Rowby
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now