I made a layout for www.phpbb.pl and I want to apply the same layout for phpBB3 style.
I did that almost, but there is a difference in the footer. I think it's related with line-height and overwriting CSS properties from phpBB3 style. I tried to reset properties, but it doesn't help.I don't know how to go around it.
For css and html please look at www.phpbb.pl and www.phpbb.pl/forum/ source code.
Images to compare:
#oberon_footer #oberon_left_side {
float:left;
}
Needs to be
#oberon_footer #oberon_left_side {
float:left;
line-height: 18px;
}
Style.php line 3975 (may not be the same in the source file)
Related
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
In a post of mine in wordpress I'm posting source code as described here.
An example of the code goes like this:
[code language="csharp"]
// Code goes here
[/code]
The result looks like this:
What I want to do is change the font size and make it smaller.
I've inspected the element of the code which gives the following:
I've tried adding custom css using the Simple Custom CSS plugin to change the font size but to no avail.
The CSS that I've tried is the following:
code {
font-size: 10px;
}
.csharp plain {
font-size: 10px;
}
.csharp keyword {
font-size: 10px;
}
How can I change the font-size of the code?
Your element seems to be part of the page therefore custom CSS should work. Most probably it is not working as the CSS rules of another stylesheet (probably the WordPress.com default) are stronger or more specific.
Try with the CSS !important rule:
code {
font-size: 10px !important;
}
.csharp plain {
font-size: 10px !important;
}
.csharp keyword {
font-size: 10px !important;
}
If this still does not work use more specific CSS selectors with the important rule.
If this still does not work your custom stylesheet is not applied yet and you have to check your configuration.
You are trying to style elements based on their css classes, but your code doesn't have the "." before their names. Based on the example of the link:
.syntaxhighlighter { font-size: 10px; }
should do the trick.
Changing the font size of your code on WordPress is pretty easy. This is what you need to do.
1. Switch from the Visual tab to the html tab in the editor
2. Surround your codes with these tags:
<pre><code><span style="font-size: small;"> YOUR CODE GOES HERE</span></code></pre>
for example:
That's it.
This was what my code looked like in preview mode BEFORE I used those tags (While I used [language= "java"])
And this is what it looks like AFTER using the tags:
The available font sizes are xx-small, x-small, small, medium, large, x-large, xx-large.
If you are not familiar with html, it is advisable to switch back to the visual tab. Hope this was helpful
I am working on a page - click here for link. The icons are all supposed to have the font size of .side-icon:
.side-icon{
font-size:28px;
}
BUT a style in font-awesome.css is overriding this, no matter where I include the library in the layout.
At the moment I have included the css in the top of a work around sheet (font-awesome-fix.css) using an #import, but I cannot get the 'font: normal normal normal 14px/1 FontAwesome;' to disappear at all.
Please help!
Make your selector more specific :
.side-icon.fa
See here how the priorities of the selectors are calculated.
Hey you should target the before element :
.side-icon:before{
font-size:28px;
}
maybe try adding an id to the specific .side-icon that you need to change the font on.
CSS:
.side-icon #id_goes_here{
font-size:14px;
}
Hope this helps!
The very helpful "!important" usually helps me solve issues like this, or at least determine the root issue:
.side-icon{
font-size:28px !important;
}
Try using more specific css to override the other styles. This may include adding classes or ids so you can chain them together to override.
Examples:
.side-icon.foo{styles}
#bar.side-icon{styles}
If that still doesn't work, you may want to use the !important override to add another layer of specificity. I wouldn't reccomend jumping to use it immediately, but that's mostly because i prefer to code more specifically than using !important everywhere.
Example:
.side-icon{style:value!important;}
If neither of these work, there may be other issues messing with your styles.
This is because of the CSS specificity rule kicks in:
When selectors have an equal specificity value, the latest rule is the
one that counts.
So including your file at the topmost location does not help because the font-awesome.css gets included later and since both .side-icon and .fa are classes on the same element, .fa defined by font-awesome.css got picked up by the browser because .fa was the latest font-size definition.
So, in order to overcome this problem, include your font-awesome-fix.css after font-awesome.css or you could use inline style after the line that includes font-swesome.css
<style>
.side-icon {
font-size: 28px;
}
</style>
or override the .fa font declaration in the same file (if you have control over it) by ensuring that the font-size override comes after the original declaration
or use one of the several ways to become more specific (see CSS specificity[1])
[1] http://www.w3.org/TR/selectors/#specificity
I have a css-problem I really don't seem to understand :) I have been styling css for three years now, but I've never had this problem.
I have declared some styles in my css-file that should apply for the content of my page. This is generally the right css, but there are some exceptions, like the page_child_title. I was under the impression that if I declared a style further in my css for specific classes, these would override earlier css-declarations. well now, in this case, it is not true. When I inspect with firebug, it seems that my browser really wants to use the font-size-css of ".page a" instead of using the ".page_child_title" (and I for one do not agree with my browser). The color of ".page_child_title" is applied correctly however. Below you can find the Html and css I'm talking about.
Html
<div id="page" class="page Jobs">
<div class="page_child">
<a class="page_child_title" ...
Style.css
.page p, .page ul, .page a {
font-size: 10px;
text-align: justify;
}
style.css (line 208)
.page_child_title {
color: #006633;
font-size: 12px;
}
style.css (line 262)
I have already tried replacing ".page_child_title" with ".Jobs a" but this didn't work. Then I tried declaring ".page_child_title" before ".page a", same result, so now I'm kind of stuck. Does anyone know what could be causing this problem?
.page a is a more specific selector. Therefore its settings will be used.
This phenomenon is called css specificity:
http://css-tricks.com/855-specifics-on-css-specificity/
a.page_child_title { ... } would work.
It would seem to me that selecting an element by its type rather than classname would be more specific.
Try changing .page_child_title to a.page_child_title
Example.
There are two solutions,
http://jsfiddle.net/ErsS4/
Change page_child_title to
a.page_child_title
Or
http://jsfiddle.net/m5V8f/
This meathod is a direct statment to the element.
Hope this helps!
An easy fix should be to change your style to
a.page_child_title
I believe it has something to do with the hierarchy of css and declaring the style of a itself.
I have a problem in viewing my web app in mozilla.
In my web app I have a button whose css styles are as below:
.page_button
{
BACKGROUND-IMAGE: url(../images/pagebutton_bg2.png);
BORDER-LEFT:0px;
/*WIDTH: 100%;*/
CURSOR: pointer;
/*COLOR: #000000;*/
BORDER-BOTTOM:0px;
}
As above I have commented out the "Width:100%"&"Color:#000000" attributes as they are causing problems in Mozilla Firefox.(The width100% option makes my buttons appear very small) -- so i commented them.
But the problem here is that this button is inheriting the same Color:#000000 & Width:100% from other parent elements.How can I stop this inheritance.
I even tried overriding those properties like : Color : null; Width : none ---> But this is not working.
I appreciate any suggestions to overcome this.
Regards,
Vijay
I don't know if I understand your problem correctly but if you want to prevent accidental inheritance you can try and use full paths...so instead of just .page_button you could use something like body.page_button though it is more probable that you should do that somewhere else in your code and not in the part you are displaying hope that helps...good luck!
width is not an inheritable property, so you must be applying the style width: 100% to your button using another selector.
If you don't already have Firebug, then I recommend installing it and using it. With Firebug, you can select any DOM element and trace back exactly how the values of all CSS properties on the element were calculated.
If the button is on a link element, then width will have no effect unless the link is set to display:block; or display:inline-block; . That could be having an unintended effect.
I also second the Firebug recommendation!