I'm currently using a design that I made using the following tutorial to have both a black/white background on my website:
http://designshack.net/articles/css/lightsoff/
While this tutorial somewhat gets the job done (very sensitive to altering pieces of html/css around), I'm really looking for a much more elegant implementation. Is there any way to create a toggle'd switch using jquery or javascript that allows for changing the background color of an entire website?
I just picked up web programming as a hobby about a week ago so I know very little about javascript and jquery right now.
EDIT: I have a static site and I'm not too concerned on performance since the only person looking at this website 99.9% of the time will be me.
Write this in javascript
var i=1;
function myFun()
{
if(i%2==0)
document.body.style.backgroundColor="black";
else
document.body.style.backgroundColor="white";
i++;
}
in event of click
<button onclick="myFun()">Click me</button>
I hope you got your ans. :)
You could create a separate css file with styles defined for all the required elements in the page, and then add the css dynamically to the page based on the button click, or a radio select as shown below.
$('head').append('<link rel="stylesheet" href="style1.css" type="text/css" />');
and
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
Here is a nice tutorial, which explains it
http://www.rickardnilsson.net/post/Applying-stylesheets-dynamically-with-jQuery
Code your website using whatever you prefer as the default color scheme. Then, create css for alternate color schemes that are under a theme subclass. For instance:
p,h1 {color:red;]
.blue-theme p,h1 {color:blue;}
Then just use javascript or server-side variables to add the "blue-theme" class to your body or root element tag. This also makes it easy to transition between themes if you apply a css transition!
It's not the most efficient in terms of load sizes, as your CSS file will be slightly larger, and performance is not optimal as adding a theme will cost processing time, but for general use I believe it's the best way to accomplish this.
jQuery is great for helping beginners add this type of functionality to websites. First, setup your CSS similar to this:
body {
background-color: #fff;
}
body.dark {
background-color: #000;
}
This sets the default css to white, and then using JavaScript you'll add a "click handler" to you button by referencing the buttons id attribute to change the class (and resulting color):
$('#yourButtonID').click(function() {
$('body').toggleClass('dark');
});
You'll want to make sure you include a copy of jQuery in a tag before you execute the above code on the page.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
Using jQuery for just this single application might be overkill, but it is the easiest way to accomplish what you want without experience and it's a library you can do a lot more with if you dive deeper into it. Good luck!
I'm not going to give you the exactly code but definately look into some of the updating functions of javascript and implement css. Maybe load different css files as colors themes for your website.
Related
So, I am really new to CSS. I am developing a site for the company I work for using WordPress. I know, WordPress "NOOB ALERT."
Anyway, I am using the massive dynamic theme and was hoping to get some help. I created three CSS classes that I want to apply to three different divs that have unique ID's.
widget-column-1
widget-column-2
widget-column-3
And I want to add the following CSS classes to those divs.
footer-widget-1
footer-widget-2
footer-widget-3
respectively to their corresponding number. However, when I tried any of the following methods using the themes built-in "custom JS" editor, the CSS classes failed to apply to the divs. And yes, the CSS works, I manually added the classes in developer mode on Chrome and it gave me the following.
Screenshot of result w/ css
But, whenever I input any of the following JS solutions, the CSS class is not applied.
$(".widget-column-1").addClass("footer-widget-1");
$("#widget-column-1").addClass("footer-widget-1");
Neither of these worked, I also tried a few other solutions but can't remember them off the top of my head. Please try to keep in mind that I just started CSS two days ago and am still learning, I don't want my poor little head to get bashed in by some coding giant with a club made of XSS attacks.
CSS classes I am trying to apply
Looking at your screenshot, what would work for the first widget would be:
$('[widgetid="footer-widget-1"]').addClass("footer-widget-1");
But, in order for this to work, you'd have to place it in a script that gets loaded on every page you want this to happen. And you probably want to wrap it into a
(function($){
// your jQuery code here...
})(jQuery)
What I don't really understand is why are you trying to add this class, when you could use the existing class/id/attributes as selectors for the CSS you're trying to apply.
For example:
[widgetid="footer-widget-1"] {
/* CSS for #widget-column-1 here */
}
...or...
#widget-column-1 {
/* CSS for #widget-column-1 here */
}
If you add this to your active theme's style.css it's going to work.
As a side note, you'll probably find CSS Selectors and CSS Combinators useful. Also, in order to become efficient in CSS your code should apply. You'll need two things:
learn to inspect, using developer console of any major browser
learn CSS specificity. This will make you understand fast how strong (specific) your selectors need to be in order for a rule to apply, without breaking anything else.
You might also want to tour the Codex to make sure you understand how WordPress works.
I have lost count of the number of "professional" programmer's websites that are made with wordpress. I have also lost count of how many websites made by freelance developers who use wordpress. So, not exactly a "noob" thing.
As for your code, try running it on page load:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <1--
<script>
$(document).ready(function () {
$(".widget-column-1").addClass("footer-widget-1");
$("#widget-column-1").addClass("footer-widget-1");
});
</script>
Developers generally prefer to narrow down their selectors based on specificness, instead of adding !important. But I'll give you the option to use it, if you wish:
And if that doesn't work, I notice that most wordpress developers add:
!important
To the end of every CSS declaration... Basically, this adds priority to your CSS over the template's css.
So, here would be your new code:
.footer {
background: /*stuff here*/ !important;
background-repeat: /*stuff here*/ !important;
background-size: /*stuff here*/ !important;
background-position: /*stuff here*/ !important;
}
I have this Jquery code for a navigation menu.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".menu").slideToggle(100, function() {
jQuery(this).toggleClass("menu-expanded").css("display", "");
});
});
});
</script>
I also have this code. Is this plug-in code necessary or is there an alternative?
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
You can achieve the same menu using just CSS. No need for jQuery/javascript.
Example tutorial: http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
Assuming I understand your question correctly:
You don't "need" jQuery, it can't do anything pure JS can't do. If you want to build a responsive menu, do that, if you want to use a library for it, do that. You can do this with JS or pure CSS depending on what design you want. jQuery can certainly make it easier to do this with JS, if you go that route.
You'll learn more and have more control and an easier time customizing it if you do it yourself, and for most small components like this, I'd go that way.
JQuery can be considered a library that creates shorthand for various JavaScript functionality. You can do anything in JavaScript that you can do in JQuery. So no, it's not necessary, but it does make things a lot easier. If you're looking for other response-oriented motion libraries without the overhead of JQuery, I would suggest velocityjs: http://julian.com/research/velocity/
Though I have to warn you, the syntax is mostly the same with a few tweaks. If you're moving away from JQuery due to the format I would suggest a different path.
You can also create responsive menus in CSS though that'll require a different frame of reference than that of JavaScript. Here's a tutorial on the subject to get you started: http://cssmenumaker.com/blog/creating-a-responsive-menu
Hi i would like to use bootstrap themes inside some websites that i am developing, however after looking at the documentation and searching online i have found it somewhat troubling that there is no explicit how to guide start to finish with using bootstrap themes, like found here. Furthermore i would like to download multiple themes into my project directory, extract them into the appropriate folders e.g. (css,img,js,ect...) and utilize them inside of my html files like so:
<div class="customized-bootstrap-item">myItem</div>
I am having a bit of trouble trying to do this because it seems there is no universality among the themes(e.g. each one may vary in how they work) and i don't want to hack together some dirty code if there is a proper way of doing it. So my question is , is there a proper way of adding themes into your existing project purely for aesthetics and customizing them by exchanging the appearance between one them and other themes, and if so how?
Can you guys point me towards some tutorials? I need to know more about how linking these js and css files will affect other aspects of the themes, and how the html tags can be used properly in a uniform way across many themes, as i won't settle likely on just one theme.
edit:
After trying some of the suggestions i managed to figure out at least some of the problems i was having by including the css style of the specific theme that i want to use as a stylesheet link in the head section of the html page that i want to apply it to, which seems pretty straight forward anyway. However i'm still a little bit perplexed on how to get all of those cool elements that i see in the themes, especially the dashboard themes into my custom html page. A good example of a theme that i am looking at is found here. If you guys could give me a bit of insight on how to get those elements on the page (i.e. dashboards, panels, UI elements etc...) that would be great. I may be mistaken but i don't think they are normal bootstrap classes, although i'm fairly new to bootstrap so i'm not 100% sure on that.
The definitions for all of these classes are located in a .css file, likely called 'bootstrap.css'. In the html page where you want to use bootstrap, add
<link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" />inside your . This will import all of bootstrap's css. If you need to use other themes, simply add that .css file into whatever folder has your css, then link to it in an html page.
This is a great resource you can use to generate a theme http://www.lavishbootstrap.com/ then linking this to your existing site is quite easy: you simply include the <link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" /> line in your code.
If you have downloaded from lavish it will include lavish-bootstrap.css. Don't forget to include jquery.js and bootstrap.js or the dropdowns etc. will not be functional.
I was wondering if it's possible to edit Liferay Portal's HTML code, add a couple of <br> to have more space between portlets. Or even add some Javascript to it?
Is this possible? If so, how?
Thanks
You can create your own theme, extending another theme (e.g. classic, _styled, etc.) and adding the 'diff' files, aka the ones you want to extend. In that case, you could extend a default css files, adding a rule like:
#content .portlet-layout .portlet-column-content {margin: 10px;}
Another quicker but less flexible approach is to use the
'Insert custom CSS that will be loaded after the theme.'
feature. This can be found at: Manage Pages > Look & Feel > CSS
The Theme answer has already been given - if you just want to change the appearance (e.g. linebreaks) this is the way to go instead of your original question to change HTML output.
If you literally need to change the HTML code - e.g. add something to or remove something from the page, you should read about Hooks, particularly those that can override jsps. This is exactly what they've been built for.
I am creating a website for a University assignment and we have to concentrate on the accessability functions. I have successfully managed to use resize text buttons but am looking for a way to turn off a css file via a button or link.
I have scoured the net and cannot seem to find very much, I found a good website that had the button I am looking for so hit F12 but it would not display the javascript for it.
Ideally I would like to achieve it without the use of javascript but if there is no other way then I am open to any help that I can get.
I am sorry if this is a simple question but I really did look hard for an answer but to no avail, I am only a first year student so have a long way to go!
This should work
for ( i=0; i<document.styleSheets.length; i++) {
void(document.styleSheets.item(i).disabled=true);
}
Here's a good way to do it quickly from javascript:
Precede all of your CSS rules with the tag body.enabled:
body.enabled p {
}
body.enabled #Myselector {
}
...
Declare your markup as such:
...
<body class="enabled">
...
</body>
...
In your JavaScript, when you want to disable CSS, remove the class "enabled" from the <body> and switch it with something else (say, "disabled"). Use whatever methodology you see fit to do this (jQuery would make this easy, but it can be done without)
You're not really disabling CSS using this, you're just making it so that none of it applies. From a user's standpoint, they likely won't know the difference.
You can do it server side when the user clicks on a "special" link, your server side code simply "skips" the stylesheets elements.
Are you trying to mimick every feature already designed in browsers (T+, T-, no CSS)? Were you asked to make an accessible website or specifically to implement accessibility features? I understand this is an assignment but that's quite a waste of time IMHO, a time that would be better spent on implementation of WCAG 2.0 recommendation. (I use the "Accessiweb" methodology a lot).
My first idea was to deconstruct existing CSS like Universal IE6 does for IE6 (you just have to remove the conditional comments and aim to every browser) but #kappa solution seems better as in both cases you must have access to source code.