I have a multi-lingual website where all the text for the site is being loaded in based on a PHP session variable for each language. My problem here is that when the text is loaded in German, the menu bar on the top of my page becomes too long for it's container and some menu items drop below. This would be okay but the menu items that get dropped down are blocking sub menus from being selected.
Is there a way to use css media queries to reduce font size of my menu when a certain variable is selected?
The best method is to add a CSS class to the body based on the language e.g <body class="language-german"> and then write CSS rules based on that
body.lang-german nav {font-size: 12px;}
There's no such media query but what you can do:
check if language in session is German
If no, do nothing more than you do at the moment
If yes, load one extra CSS file or extra rule where you have defined font-size for example this way:
nav ul li {
font-size: 10px;
font-size: 0.8rem;
}
This will change nothing for other language and for German language you can define custom CSS (font-size or of course anything else)
Make your CSS file a PHP file. Yes you can do that, it's not magic.
suppose you have a CSS file called style.css: rename it style.css.php (.css is optional)
<?php
$lang = $_SESSION['page_lang']; //or however you prefer
if($lang == 'de'){
echo "german style rules";
} else {
echo "other style rules";
}
of course this is simplified but should make you going.
Related
I have added styling to my anchor tag and have made the text-decoration to none to the entire website. But I want the blog section of my website to underline the links.
I'm using the code snippet plugin in wordpress as I don't have direct access to the files.
And this is the code that I'm using.
add_action( 'wp_head', function () { ?>
<style>
a:link {
text-decoration: underline;
}
</style>
<?php } );
The problem is that this PHP code gets applied to my entire website which is not what I want. I only want this to be applied to the body section of the blog content.
I would love to have someone assist me with this problem.
Thank you.
This is a job for CSS (inside a <style> tag) with specific selectors. Your CSS selector, a:link is very non-specific. That is, the browser uses it whenever it sees an anchor <a> tag.
You need the browser to use it only on some anchor tags. So, you use a more specific selector.
Try using this CSS to style the links within articles in your posts and pages.
div.site-content main article a:link {
text-decoration: underline;
}
It affects anchor tags only in html nested inside a hierarchy of HTML elements. Most themes use these elements.
If you want to style just posts (not pages), put article.post in the selector instead.
div.site-content main article.post a:link {
text-decoration: underline;
}
You can add CSS to your site without the Code Snippets plugin, and without php code. Go to Appearance -> Customize. At the bottom of the left column choose Additional CSS. Then put in the CSS you need.
If you want to be able to figure this out for yourself, right-click in the browser element you want to style and choose Inspect. You'll see the HTML for that element along with the elements it's nested inside.
Additional CSS is a good setup because it survives plugin updates, and because you don't neet to hack any php to get it to work.
I have created my own custom navbar. I have kept is separate in a file called main-menu.php
I call it into the header using:
<?php
include "main-menu.php";
?>
The main menu is made up as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav>
nav contents...
</nav>
<script>
jQuery Contents
</script>
<style>
CSS Styling
</style>
The problem I am experiencing is that although this is a seperate file, calling into the header... the CSS i have added and the scripts/links called at the top of the page effect the layout/display on all pages of contents below the header.
for example, I am designing an e-commerce store and the description has changed its layout, as a result of the main-menu.php it has become crammed and text which should be bold are no longer bold,.
Is there anything that can be done to prevent the css in main-menu.php from effecting the rest of the page?
Your issues stem from either lack of understanding or misunderstanding of how both CSS and PHP includes work.
The problem I am experiencing is that although this is a seperate
file, calling into the header...
When you import it, though, it is no longer a separate file. The source might be a separate file, but the include function pulls the imported code in, and the interpreters (both PHP and the browser) effectively see them as a single file. Since the final HTML/CSS/JS code is output into a single file, it follows all single file rules.
the CSS i have added and the
scripts/links called at the top of the page effect the layout/display
on all pages of contents below the header.
Yep, that's what happens when you add CSS to a page. This is part of the cascading part of Cascading Style Sheets (CSS).
The ideal way of addressing this is to better understand how the cascade works, but for now, we'll just address the problem in one of the easier ways and you can go from there as you learn.
Odds are good you have something like this in your styles:
a {
font-weight: bold;
}
That's going to make all of your links bold. All. Of. Them. This is because the browser is only matching a tags.
So, to make all of your <nav> links bold, you would do this:
nav a {
font-weight: bold;
}
If you have more than one <nav> element on your page, you can add classes and/or identifiers to them in order to tell them apart. The recommended way is to use classes for CSS, but when used sparingly and mindfully, I find IDs to be particularly helpful.
So, you might do something like this (IDs):
#header-nav a {
font-weight: bold;
}
Or this (classes):
nav.header a {
font-weight: bold;
}
What all of these do is tell the browser to only style links that are within <nav> elements (or, more specifically, nav elements classed header or the element named "header-nav").
What About The Bootstrap Styles I Don't Want?
This is where Bootstrap's class-happy nature works in your favor. Just don't use Bootstrap's classes, and you won't get most of its styles.
From there, you just weed out the styles still applying to your element, and override them. This can be a little hairy with these libraries, but such is the nature of the beast.
So, if you have a style like from Bootstrap:
.nav.header a {
font-weight: bold;
}
You would simply match the specificity, or get a little more specific if necessary:
.nav.header a {
font-weight: normal;
}
/* Or... */
.my-nav.nav.header a {
font-weight: normal;
}
You can find out what selectors Bootstrap is using by opening your browser's developer tools and inspecting the affected items. If you're unsure, you can use the developer tools to turn on and off applied styles, or add your own. Then, once you find the selections, you can match them in your stylesheet to override Bootstrap and set it back to the original value.
So How Does Vue Do It?
As a bit of a bonus, I'm adding this in. You may see or have seen libraries such as Vue or React that allow for the creation of components. These are fully-encapsulated UI items, that maintain their own HTML, CSS, and JS, and don't interfere with one another. It may be how you came up with the way you're trying to do it.
However, what these libraries do under the hood is, at compile time they "namespace" everything, similar to what I explained, above. Your <foo> component becomes <div class="foo"> and your a { font-weight: bold; } becomes foo a { font-weight: bold; }. Similar technique, just automated.
There are a couple of ways of doing this.
1. Using different selectors
If your <div>s are all being affected by bootstrap and you don't want that, then simply assign an id or class that is not being used by bootstrap and then this will not conflict with bootstrap's style.
A common class name used by bootstrap in some divs is the alert class. So if you have a div with a class alert, but you want it to look different than bootstrap's style, then consider it giving it another class name such as alert-custom to keep both styles applied to your elements (depending on what class is being applied to the element)
2. Overriding Style
You could override whatever style you have already loaded for a particular element by making the desired CSS declaration the bottom-most declaration for that particular element.
If you have some CSS rules for a <div> element in your bootstrap <link />, but then you declare some other rule in a <style> element somewhere else (anywhere is fine, as long as it is BELOW the style you want to override) for that particular element or tag, then that declaration will supersede the bootstrap styling.
3. In-line Styling
This will override any previous styles declared for a particular element. You can read more about it here
I hope this helps!
you can add the !important property to the item you want to modify, this property will overwrite the current one. For example:
<div class="your-class">Text modiefed</div>
<!-- new css -->
<style>
.your-class{
font-weight: bold!important;
}
</style>
I have a problem with Wordpress Theme.
I'm trying to put sidebar in header.. and because of sidebar class style it receives "colored" backround. if I will change it then all sidebars will have a change.
How I can override that style class only so a change will be only in a place I need it?
part of section in template page.php
<?php display_ca_sidebar( $args ); ?>
css section of sidebar
#sidebar ul li{width:298px;float:left; background:url(i/Modern/sidebar.jpg) left top no-repeat #83b1cd; margin:0 0 19px 0;padding:0 0 10px 0; list-style:none; list-style-type:none; border:1px solid #536867;}
I need to override "background"
Thanks for Help!
Give it an unique id and use that id as css selector.
According to this https://wordpress.org/extend/plugins/content-aware-sidebars/faq/ you are in control of the HTML. So when you are creating the sidebar div, just give it a different class with which you can style that particular sidebar.
You shouldn't have to overwrite anything. When using #sidebar, you should try to use that ID for CSS that applies to all "sidebars", then use a specific class to make each sidebar appear the way you want. That gives you the ability to reuse classes and also create a default class, but you'll never have to worry about conflicts or overwriting things.
I'm not entirely sure what you mean, but if you're trying to change the background of one element in a list of elements (which I'm guessing it is if it's inside li tags), then this may be of use:
#sidebar ul li:nth-child(2)
{
background:blue;
}
and replace the number two with whichever number you need to get your sidebar to work
hope that helps
Hey lets say i got two links on my page and i have some sub links(show up when main link clicked). Those two links have different background image.
*link1
-link1underlinkone
-link1underlinktwo
*link2
-link2underlinkone
-link2underlinktwo
-link2underlinkthree
I can easily change background image on those two main links, but how should i pass same background style to my under-links? And underunder-links if i would have any?
edit: woops forgot to tell i want change background image of BODY not the link/links ;)
You should try putting both the main links in seperate div's with their sub-links. Set the background on the div (set display to none so it is invisible), and then set the background on all the links to inherit, so they take the background from their parent div.
Edit: Use the code I made below
<head>
<style type="text/css">
#link1wrapper {
background-image: url(background1.jpg);
visiblity:hidden;
}
#link2wrapper {
background-image: url(background2.jpg);
visiblity:hidden;
}
.linkmenu a{
background-image: inherit;
visibility: visible;
}
</style>
</head>
<body>
<div id="link1wrapper" class="linkmenu">
*link1
-link1underlinkone
-link1underlinktwo
</div>
<div id="link2wrapper" class="linkmenu">
*link2
-link2underlinkone
-link2underlinktwo
-link2underlinkthree
</div>
</body>
Edit: I fixed the code. Now, it puts a background on the div's and hides the div's, then I set the links in the div's to visible and voila, all the links have inherited it's background. The things you should be aware of are not to put anything else in the div's. If you do, you have to style them to set them to visible and set their background to none.
That's all I could come up with based on the very limited information you have given me. You didn't use any code, any examples, or any references, so it's very hard to answer your question accurately.
I better get an upvote for this one =p
Guessing you want to make a proper menu structure here is a little demo I made.
http://jsfiddle.net/sg3s/fPu9S/
The two key properties used are background-image: inherit and visibility: hidden.
background-image: inherit will make the element inherit properties from its direct parent, if no image is specified this means no properties will be inherited. Due to this we need to make the ul for the sublinks / menu inherit the properties from its parent too... Then we mask this image on the ul using visibility: hidden and since visibility default setting is inherit we need to make the lis visible again with visibility:visible.
So thats the explanation of what is actually going on. inheriting the styles can't be used together with the anchor tags unless you nest the sub links inside the main anchors and I don't think that is even valid or accepted code.
How to make an external PHP widget page have its own CSS.
The catch is - when the external page is included it's been affected by the stylesheet of the host page.
The included page is actually a comments 'widget' (with his own .css file, about 30 lines, not much) and the height and width flexibility are a MUST HAVE.
The PHP include was so far the best solution, but I lost my hair adjusting its CSS file to fit / null (adding/excluding/ styles) any possible host web page.
Example:
if the host page has styles for img borders I have to null them from the widget's style.css, same for H3, P, and so on.
How would you preserve a widget stylesheet from being affected by the host page styles, beside using iframe?
You know CSS is a client-side thing; it doesn't know about PHP and how the page has generated on the server.
You have got to focus on the final resulting HTML and redefine tags and classes and IDs so that your desired style rules apply to right elements.
You can limit the scope of CSS rules by surrounding that part in a div with a unique ID or class and use it in your CSS selectors so they wouldn't apply to elements outside of that div.
Or if you can't do that you have to use stronger rules to override included ones for your other elements. Which will be a little messy, but you can override styles applied to an element using several techniques like !important or having more selector parts.
For example, in both of the below samples, the second rule will overwrite the first one:
#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }
or
#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }
You might want to apply a mini CSS reset on your included code. Surround your code in a unique id, like so:
<div id="widget">
<!--your code here-->
</div>
Now apply the reset to everything inside this, using a basic CSS reset like Eric Meyer's, available here: http://meyerweb.com/eric/tools/css/reset/
Now, apply your own CSS. Nearly all outside CSS will be wiped out, and yours will be applied.
Try surrounding your widget code in a div with an id. Then prefix each CSS selector used in the widget with that selector.
ex.
<div id="widget"><p class="nav">hello</p></div>
instead of,
.nav{
// styles
}
do
#widget.nav{
// styles
}
CSS Styles prioritize like this:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
Depending on how much CSS you need to apply, you could writ it on the "head" tag.
Hope the suggestion helps.
If I understood correctly, your included page has some CSS rules such as:
div {/*rules*/};
p {/*rules*/};
and so on.
You should change your CSS selectors from the most general ones (div selects all the divs in the page) to the most particular ones (use them in this order: id, class, child-selector) in order for your rules to apply only to your included elements.
For example, say your included page is wrapped in a div, the PHP code would be:
<div id="my_page">
<?php include "myPage.php"; ?>
</div>
Then, all your rules for the page should refer only to the children of the element with the id my_page:
Instead of
div {/*rules*/};
you'll have
#my_page div {/*rules*/};