I've finished my website and completed the style sheet but now i have created a second style sheet (called other.css). What I'm trying to do is have 2 links on my home page, one with "normal.css" and one with "other.css". So basically i want the user to be able to choose between my 2 styles. Ive duplicated all my original pages and added "2" to their name, i have also created other.css and referenced it on these pages. "2" pages all display the alternative layout fine but i dont know how to let the user switch between styles... any help please?
N.B. my html come isn't changing at all, i'm only changing the css file.
Dave
Good question. The answer would greatly depend on the server-side technology that you are using. For example, with Google App Engine which I usually use, it's a simple matter of changing part of the header of the HTML that is generated to point to a different CSS file. But then it's not a static HTML file.
CSS Zen Garden is specifically a website to illustrate the same HTML file presented with different stylesheets. Maybe you can get some ideas of how to do this from there. You'll see again though that the pages with different styles, even though they have the same HTML source, are not static .html pages.
This W3C page not only explains how to do it, but also has a number of alternate stylesheets itself, so you can actually test it in action.
In most browsers, the user can switch stylesheets with something like View → Page Style. All that's necessary is for the menu bar to be visible...
If you have php on your server you could have the style sheet change based on a cookie. The following code would work:
if ($_COOKIE['style'] == '1') {
echo '<link rel="stylesheet" href="normal.css" type="text/css" />';
}
elseif ($_COOKIE['style'] == '2') {
echo '<link rel="stylesheet" href="other.css" type="text/css" />';
}
else {
echo '<link rel="stylesheet" href="normal.css" type="text/css" />';
}
Add a link to the bottom of the page:
Change Style
On the changestyle.php page have the following:
if ((isset($_COOKIE['style'])) AND ($_COOKIE['style'] == '1')) {
setcookie(style,2)
}
elseif ((isset($_COOKIE['style'])) AND ($_COOKIE['style'] == '2')) {
setcookie(style,1)
}
else {
setcookie(style,2)
}
Related
I have inherited a work for another developer, it is a website made with WP Bakery Page Builder and I have to fix some design issues.
The thing is that the other developer add some custom css code that I don't find in the backend.
It is generated as inlince css in the index.php. Looks like this.
<noscript><style type="text/css">body .wpex-vc-row-stretched, body .vc_row-o-full-height { visibility: visible; }</style></noscript><style type="text/css" data-type="vc_shortcodes-custom-css">.vc_custom_1530389595419{padding-top: 5% !important;padding-bottom: 5% !important;}</style>
I have problems with these vc_custom_* classes, I want to remove all of them.
Can you guys help me to find these mysterious css?
Thank you so much.
I had exactly the same problem. But as the previous answers have suggested, it is more a matter of codification than of code.
The solution for me was to enter:
And then the values that are automatically like vc_custom_
are margins, border and padding
You can use conditional tags to target the specific page you need to remove the styles on. You can use is_page() to target a page page (as opposed to another post type) and pass a page ID, slug, title, or no argument to target any page.
function wpse_217881_remove_scripts() {
// Check for the page you want to target
if ( is_page( 'About Me And Joe' ) ) {
// Remove Styles
wp_dequeue_style( 'parent-style' );
wp_dequeue_style( 'child-style' );
wp_dequeue_style( 'parent-style-css' );
wp_deregister_style( 'parent-style' );
wp_deregister_style( 'child-style' );
wp_deregister_style( 'parent-style-css' );
}
}
I'm assuming you already are, but to be explicit, you should be calling the function that dequeue/deregisters the styles from an action hook - in this instance wp_enqueue_scripts.
From the wp_enqueue_scripts docs:
Despite the name, it is used for enqueuing both scripts and styles
I am creating a landing page and I would like to remove the topbar and header/main Nav links from this page, and this page only.
Currently, I use this CSS code to remove it:
.top-headers-wrapper{display:none;}
However, it leaves a big blank white space in place of the header. Ideally this white space would be removed and the big background image would go all the way to the top of the page.
I illustrate the difference below, where the page with -test appended to the URL has the CSS to remove the header. The original URL does not have the code to remove the header.
How can I modify the code to remove this white space as well as the header/topbar?
https://www.californiabeardco.com/summer-giveaway/
https://www.californiabeardco.com/summer-giveaway-test/
Your content-area class has a top-margin of 133px. If you are removing the header altogther then you should be able to remove the top margin like this
#page_wrapper.transparent_header .content-area {
top-margin: 0;
}
It looks like there are a couple of instances of this in the various #media queries in the CSS file. So you will have to find each instance.
Also like Obsidian mentions in the comments when I access your site I was logged in with admin privileges, you should change this as soon as possible. Hope that helps.
You should disable admin bar by more elegant way, like go to Profile > uncheck the options Show Toolbar when viewing site.
Or if you want to completely disable admin bar for all logged in users, insert this code to your theme's functions.php file.
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_admin_login_header');
Another way is use filter, completely disable for all logged in users too.
add_filter( 'show_admin_bar', '__return_false' );
Ultimately, I found a solution. It's a bit of a workaround but it worked nonetheless.
The solution I found was to create a page template (e.g., "Landing Page") with no headers, footers, or sidebar. This results in a blank page which, when using a page designer like Visual Composer, allows me to design on a blank canvas, perfect for creating a landing page.
I followed the steps from this tutorial but will post them here for anyone else with the problem:
1) create a new php file
2) paste in this code
<?php
/**
* Template Name: Clean Page
* This template will only display the content you entered in the page editor
*/
?>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body>
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile;
?>
<?php wp_footer(); ?>
</body>
</html>
3) Upload the php file to the server hosting your Wordpress instance. The location should be your theme directory. Something such as ../wp-content/themes/YourThemeName
I added the php file to my child theme which worked fine, if you use a child theme, which is usually recommended protocol as I understand it.
4) Log onto the Wordpress admin console and when you create a new page, look for your newly added Template as an option.
How can I create and load a color scheme on my HTML site using CSS?
I have base.css green.css and orange.css. Now, when site is loaded default color scheme is green, but how to change it to orange.css on the client side?
I want each user to choose color scheme suitable for him. Also the choice must be saved for next visit of this person on site. Something like this in that IPBoard skin (feature called "Color themes") http://www.skinbox.net/skins/velvet/
If you're looking to swap stylesheets on the frontend, and want to save the preference, you can do something like this (using jQuery for simplicity):
In the <head>
<link id='theme' href='green.css' type='text/css' />
In the <body>
<a id='green' href='#'>Click here for green theme</a>
<a id='orange' href='#'>Click here for orange theme</a>
In the javascript file
$(document).ready(function(){
if( localStorage.theme )
$('link#theme').attr('href', localStorage.theme);
$('#orange').click(function(){
$('link#theme').attr('href', "orange.css");
localStorage.theme = "orange.css;"
})
$('#green').click(function(){
$('link#theme').attr('href', "green.css");
localStorage.theme = "green.css;"
})
});
The above code would output two links which switch a CSS file's location on click, thus changing the theme. It also saves the last selected theme in localStorage so that it's remembered.
In general you should do this on the serverside end of things - memorize preferences using cookies or sessions (and/or database tables behind them) and then just generate the correct stylesheet reference in your HTML.
IPB does the same internally, it stores your preferences in a database table and then renders the correct <link rel="stylesheet"> element in its template engine.
Alternatively you could do it completely in Javascript, loading stylesheets on demand, but that is both an advanced topic and generally an inferior solution to a solid serverside implementation.
You could store the default css color scheme file path in a cookie when your index page is loaded, if it is not already set.
Then when you are declaring your css file, simply do;
<link rel="stylesheet" href="https://[YOUR_DOMAIN]/themes/[COOKIE VALUE].css" />
You could then have a change theme button which when clicked will access and change that cookie value to the new theme css file path.
Use Javascript to load selective css onClick.
OR
Use jQuery to change color scheme onMouseClick.
I'm creating a web application and have written a CSS stylesheet to apply to all colour, layout, positioning etc. It's about 800 lines in all.
I want to provide the user with the option of selecting a colour scheme preference; at the moment this means I have 6 copies of the CSS file in my project, each with different colour attributes only (about 15 or 20 lines) to represent 6 different colour scheme options.
This seems like a lot of cumbersome duplication; all other CSS attributes remain the same in each copy.
Is there a way to separate the colour attributes into a separate CSS stylesheet to be applied with the general CSS stylesheet to the page?
One way to accomplish your goal is to extract every CSS-Element which is influenced by coloring and put it in one single selector like:
p, li, #whatever, .someClassInfluencedByColoring{
color: #[yourColor];
}
you could put this declaration into one CSS-File (for example color.css) and then use import statements like the following in a master CSS-File:
#import url("color.css");
Another way would be to use SASS or LESS and use variables where you define your color once in every stylesheet.
Make color style sheets. Lets say your main has a class called
Main.css
.example{
float:right;
width:100px;
height:auto;
}
And you want the color applied to it with a user specified color scheme.
Make the smaller color schemes like so
Color1.css
.example{
color:orange;
}
Color2.css
.example{
color:red;
}
In the main index page would look like this:
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<?php
//user get color scheme from db query
$color = //user color variable
if($color == 1){
echo '<link rel="stylesheet" type="text/css" href="color1.css" />';
}elseif($color == 2){
echo '<link rel="stylesheet" type="text/css" href="color2.css" />';
}
?>
</head>
That's the only way I can think of.
just use
var bleh = $('body');
function changeToBlue() {
bleh.css("background","blue");
}
I am creating a website and i want to allow personalization to individual users upto some extent like changing font family, background color etc. The problem with this is that, my default css file that i load has already default classes for everything. Now when i fetch the background color from my database, then if there is null value for background color then default css class of mystylesheet.css should be loaded and if the value is not null, then i want to override this with my default css. How is it possible? Thanks in advance :)
Load the default stylesheat in a style tag, and put your dynamic styles in a style tag after that.
Which style to use when different styles target the same element is determined by specificity, and if the selectors are the same, by order. The style that is found last is used.
The approach mentioned by zaf would require that you reload the page when you want to switch styles sheets. What I find to be a better approach is to add a classname to the body
if you have the option of using javascript
<body class="theme-1">
<div class="main"><div>
</body>
Then each of your style sheets should contain the theme name in the declarations:
--theme1.css
.theme-1 div.main {
background-color: #eee
}
--theme2.css
.theme-2 div.main {
background-color: #f30
}
To switch style sheets, you just remove the old theme name and add the theme you want to use.
Then you can even add style sheets dynamically if you provide an interface for the user to customize the look and feel of your page.
New Improved Answer:
I just found a nice solution implemented by the folks at extjs. It involves loading all the stylesheets you want using <link> tags. The trick is that you can set a disabled property on the link element which will cause it not to apply.
For an example, use firebug and look at
http://www.extjs.com/deploy/dev/examples/themes/index.html
Look for styleswitcher.js and look at the function setActiveStyleSheet
function setActiveStyleSheet(title) {
var i,
a,
links = document.getElementsByTagName("link"),
len = links.length;
for (i = 0; i < len; i++) {
a = links[i];
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if (a.getAttribute("title") == title) a.disabled = false;
}
}
}
EDIT:
Reason for CSS property precedence?
One way is to produce the css file dynamically from a php script.
You would include the file like:
<link rel="stylesheet" type="text/css" href="css.php">
And the css.php file would look something like this:
<?php
header('Content-type: text/css');
// whatever you want to ouput depending on the user
?>