I am using Joomla3.2 for my site development. I wish to reduce the size of the article's title in particular pages without affecting other pages.
By default it will take <h1> and I want to reduce this into <h4>.
I would also like to reduce the size of the read more button size in the article.
First of all, the usage of <h1> for the article's title vs <h4> is not a matter of size alone; but most importantly it tells search engines what the page is about.
What you want is simply to apply a different style to the <h1> in some particular pages.
In order to achieve this you might
add a css suffix to the specific menu items that are linked to
the articles whose title is too large;
add the Itemid parameter in the <body> tag in your template
Whichever you choose, in the end you'll have a means of discriminating the articles - be it the page class or the Itemid - which you will use in your css to apply a smaller font-size.
So for example your selectors may be:
body.item-113 h1, body.item-116 h1
or
.someCustomClassYouAddedToTheMenuItem h1
Related
I want to put headers in unordered way. This is how you can do it in markdown:
h1
h3
#h1
###h3
##h2
This way h3 is not the following size (h2) but two sizez smaller (h3).
How to do it with rst?
From docutil's documentation on Sections:
Rather than imposing a fixed number and order of section title adornment styles, the order enforced will be the order as encountered. The first style encountered will be an outermost title (like HTML H1), the second style will be a subtitle, the third will be a subsubtitle, and so on.
...
...a document must be consistent in its use of section titles: once a hierarchy of title styles is established, sections must use that hierarchy.
So you cannot do this directly with reStructuredText. You will get a SEVERE: Title level inconsistent: warning.
Correct, Sphinx will enforce the hierarchy. you could instead use the .css directive to format titles more flexibly.
I have a custom font imported to this page using CSS: http://roundup.amebc.ca/
When Show Hotel List is clicked in Chrome, the custom font is ignored on the second line even though it is under the same heading and styling as the line above it (ex: Downtown and Harbourfront). I haven't been able to find anything that talks about this.
Add this to your css:
.hotel-list p {
font-family: 'Calibre-SemiBold';
}
Edit: This solution worked because if you view source or inspect one of the items in question on your page, you will see that they are all in fact wrapped in <p> tags.
Your <p> tag had not yet been styled to show the font you wanted so it was falling back to the font that was set on the <body>.
Hope this makes sense - see image below
I'm trying to change font size and color for "Price" on product page only. When I change .price on style.css it would change price format on all pages which is not what I need. I need to change price format on product page only.
Any help,
Thanks
You can simply make the change at the top of that particular page or even on that line. Simply place open and close style tags above the body tag and between them insert the rule delaration. This will override the linked style sheet.
You can keep your CSS consolidated and still do this. Add an ID to the body tag of the products page:
<body id="pgProducts">
Or Wrap the contents
<div id="pgProducts">
then you can use that in your "over-ride" selector
#pgProducts .Price {
/*Style to appear in pgProducts only*/
}
This could give you greater extensibility should this style end up required elsewhere.
Of course you can use what ever ID you like here. You could also use a class instead of an ID but an ID has better specificity.
Is there a way to limit a css to only apply to what is in a content area and not the entire page?
I have an ASP.NET 4.0 app. I obtained some from someone else that I don't understand (It's javascript and uses a css). By his instructions, I put it on the page to style a list (UL). All of this occurs within a content place holder. However, now some UL's on the MasterPage are also being affected by this style.
Is the content placeholder an html element - if so you can add a class or id to that and use it to limit the css styling for your ul's to only those in the "main" section. If not, you may need to wrap your content in an extra div:
e.g.
<div id="main">
<!-- content here including the ul -->
</div>
then the css to style that is:
#main ul
{
// styling here
}
As Kris says, you can use an id selector. This is "The right way" to do it.
If that won't work due to your constraints (running impenetrable mystery code), you may need another option.
Fortunately, the kludge is pretty straightforward too: put the app in an iframe and host it from a separate, blank page.
What are the best practices with respect to styling HTML elements using CSS? What's the preferred granularity for styling HTML elements? i.e., do you have lots of
div.searchbox input
div.searchbox p
div.searchbox p.help
OR
input.searchbox
p.searchbox
p.searchboxhelp
Which css code is considered easy to maintain? Is using grid frameworks and reset considered best practice?
Thanks
I totally prefer the first approach. The search box is a defined entity with specific styling rules. If the search box has unique visual settings that no other element on the page has, which is usually the case, that is the way to go.
If there are any global rules in addition, you'd define them globally in a different section of the style sheet:
input { font-size: 16px; color: blue }
If there are any rules that a number of input elements on the page (not all in the search box) should share (e.g. "the search input field, and the login input fields should stand out a bit, and have a yellow background") you can create a global class in addition to the "local" rules:
input.highlight { background-color: yellow }
and add that class definition to every input:
<div class="searchbox">
<input type="text" class="highlight"> <!-- Gets applied the "highlight"
and the "searchbox" styles -->
</div>
But the basic foundation should always be a "local" set of rules as you do in your first example IMO.
I normally try to reach a compromise between:
input.searchbox
and
body div#layout div#main div#content div.section div.subsection form input.searchbox