Forum Replies Created
-
Posts
-
I unzipped the main-folder for the theme and renamed the theme-folder in it, and I also changed the first line in stylesheet. Zipped it again and imported to WP. After I had activated the theme for the network I got it to play for the new site. It was simpler than expected. Hopefully everything will work now as expected.
Thank you for helping me!
Please, do yourself a favor and use the tools available in your browser to find out where to change certain CSS.
For Firefox you can use FireBug. Install the plugin and play with it a little and you will discover its power.
In Chrome there is a tool built-in. Right-click and choose the option at the bottom of the list, something like "check component" in a free translation. I do not use the English version.
Opera also have built-in developer-tools that works very much like FireBug.
You will save yourself a lot of frustration if you use these tools. They can take some time to get used to but that is well worth the time.
Enjoy!
Ramseyp,
Great comment, thank you so much!
Those two articles by Nick I have never seen before, even if I have read a lot of good stuff from him. I will study them and try to learn more about the Genesis framework.I also really appreciate your code. Now I have something to try and make some experiments with. I think this will take me forward as it was in line with what I expected. Nice to know that HTML can be used within a function as I am much more acquainted with HTML and CSS than PHP.
Thank you Ramseyp for helping me.
Always when you have to change colors, fonts and such in any webpage then the Firebug plugin for Firefox is indispensable. There you can study the hierarchy of the div:s (layers) in css and you will easily find where to change different properties.
In your case when you want to change the blue color in the box you will find that it is located here in the stylesheet:
.home-top-1 {
background: url("images/home-top-left.png") repeat-y scroll left center #1EA7E8;
float: left;
height: 235px;
width: 330px;
}
In the code you will find that it is not a plain color, but an image (or a repeated stripe) that is used as a background-color. This will make it rather easy to change the background. You have only to find the imagehome-top-left.pngand edit it to you wish. Save the image and send it back to your server, to the images folder in your themes folder. If you keep the name of the file intact you must only change the last color-code (#1EA7E8) in the css-code to something suitable to you new image. It is that easy!The CSS color-codes you will find here:
http://www.w3schools.com/cssref/css_colors.asp
It looks OK Chrome as far as I can see. May your client have any settings, plugins or add-ons that can affect the browser? Have they cleaned up their chache?
When I checked in Firebug it seems that it will work if you change the following in the stylesheet:
Here you change the height of the disclaimer-area:
.disclaimer {
background: url("“images/gradient.png”") repeat-x scroll 0 0 #FFFFFF;
border-top: 1px solid #D5D5D5;
box-shadow: 0 1px 1px #000000;
clear: both;
font-size: 10px;
height: 200px; /*or whatever that suits you*
overflow: hidden;
text-align: center;
}Font size you may change here:
.disclaimer p {
font-size: 24px; /* change size here*/
text-align: center;
line-height: 160%; /*add this line to the css, 160% means percent of the current font size*/
}
More on other property values you will find here: http://www.w3schools.com/cssref/pr_dim_line-height.asp
Please, always remember to FTP the changes in the stylesheet to your web-server in order to visually see the changes. You also have to reload the page into the browser. Sometimes the chache can really fool us.
The comments in the code between
/*comment*/should be deleted when you are ready to release your work. That is a good habit as it will decrease file-size even if the web-browser will omit it anyway.I am sorry it did not take the HTML-code for the link. It is: http://www.apachefriends.org/en/xampp.html
Something fishy with this editor.
An option might be to install XAMPP, or WAMPP as it will be in the Windows case. That is a server in your own computer and it can also be installed on an USB-memory. It makes it easy to play around with lots of tests without hurting anything for others. And you can work fast without the need to FTP things and wait for a distant server to react.
Good luck!
+1
I agree that here is something that needs to be adressed. Recently I discovered that the wraps seems to be inside the different div:s or containers. To me it sounds that wraps are wrapping containers. A bit of confusion here, maybe because babel of tounges
Are there any schemas on the div-structure of a standard page? I know that it will differ for the different themes, but I guess there are some basic structures.
Michael,
Good you found the cause. CSS can be a challenge to read off, because different properties can greatly change the outcome. Cause and effect are not always obvious. But you solved it and that was the task.
Enjoy the result!
Hi Michael,
When I look at your website I get the impression that the only problem is your backgrund-image. It is not too high but a few pixels to low. If you look at the upper edge there is some kind of frame or edge with a darker blue line and a small shadow below it. That part is missing on the background-image.
Usually when I have to make a image that exactly corresponds to another image I use the original and save a copy of it with a new name. If you use the name you already have for the existing background-stripe you must not change in the CSS any more. Just replace the old image with the new one. But you should crop it to a size that is suitable for the purpose. Say you crop the left end. Take the full height and a width, say from the left edge to the gray background. Mark that part and make it the new canvas size, so the main part is cut away. Then you get an exact copy of the background. Send the file via FTP to the images folder.
As an example I give you my path to the folder based on my localhost and the eleven40 theme. You have to translate this to your setup.
E:\xampp\htdocs\wp-content\themes\eleven40\images
Otherwise it seems to work well. So it is just a minor correction.Hope this helps.
Hi michaelwolsey,
Well, I will try to help. As I don´t have the Education-theme installed I can´t directly see what happens to the Theme. Now, I myself is working on the Eleven40-theme, but I can open the CSS-file for the Education-theme. I can also get some help of the Firebug-plugin for Firefox and for Chrome there aslo is a code-checker built-in, when you right-click on the page ( I don´t know the English name of it). So please, keep that in mind that my advice is based on other tools.
First your menu. Look for this code:
<code>
.menu-primary a, .menu-secondary a {color: #FFFFFF !important; /*Change to color: #000000 !important; That is six zeros, which gives you black, or use any color you may want*/
display: block;
position: relative;
text-decoration: none;} </code>
The !important property will always be applied no matter where that rule appears in the CSS document. So that´s a way to override later code in the CSS. CSS is said to cascade as the later properties in the stylesheet will replace the former all the time. Sometimes the construction makes that you still want to keep a certain property by adding: !important. That was done in this case and it was therefore easier to discover.
The other question is about the background-color in the header. Look for this code in the style-sheet:
<code>
#header {background-color: #000000 !important; /*this one could be changed to your hearts desire. #CCD1D5 is pretty close to your header image.*/
background-position: center top !important;
border-top: 4px solid #EEEEEE;
margin: 0 auto;
min-height: 200px;
width: 100%;</code>
However, it you want to get exactly the same color as you have in the center of the header, then you should make an image as small stripe of the full height of your excisting image, and you get the correct background-color. Say you call this stripe "header-bg.png" then the line should be changed to this:
<code>
background: url(images/header-bg.png) repeat-x;
</code>
In order to make it work you have to FTP you image-stripe into the images-folder in you themes-folder.I did accidentally notice that your image in the header is called through http, which to me seems to be an superflous way about. I would have preferred to put the image into the images-folder in the themes folder (where also the style.css is located), which has to be done via FTP. That should make the server´s job a bit easier, and therefore saves energy and bandwidth.
<code>
#header {background: url("http://www.visibility911.org/wp-content/uploads/2012/12/vis911webpageheader.jpg") no-repeat scroll 0 0 transparent;
/*background: url("images/vis911webpageheader.jpg") no-repeat scroll 0 0 transparent;*/</code>
To me things like the header-image and such must not be available to people that will later contribute with content through the WP-backend.
Hope this will help you.
Nice to hear it worked for you. Now, you can easily go further with CSS. It is fun even if it sometimes can be very challenging, but there are tons of tutorials out there. So you are not without help.
Good luck!
Just open the stylesheet often namned style.css (in the theme-folder). It should be opened in a wordprocessor like Notepad, Notepad++ or something alike. NOT in Word or OpenOffice Writer because they will add a lot of crap to the code that will destroy your file. To be on the safte side it is always good to start with a backup of the file (save a copy in a BKP-folder).
In the CSS you will find different commands in a certain order, often with an overview at the beginning of the stylesheet.
Look for the sections with Primary and Secondary navigation. Or make a search in the document for "menu". That is a good way to not miss any command. As long as you change colors and backgrounds you are pretty safe. Even moderate changes of font sizes and font-families will usually work well. But if you begin to change widths, heights, margins and paddings you can easily mess upp the outcome.
Menues are a tricky thing because there are so many different modes in the interaction with the user, but with a systematic approach you will succeed.
One trick that I often use is to add some clear background-colors like red, blue, green, orange and so to those commands that I think will affect the part I am working on. Then it is much easier to see what the commands really are targeting and how different DIVs affect each other. You may add the color to the end of the code with something like this:
.menu-primary {
border-bottom: double #ddd;
border-top: double #ddd;
background-color: red; /*added by me as a mark*/
}When you are pleased with what you got you should delete the last line, with the background-color, if you not ment use it in the layout.
And always remember, if you are working with a webhost outside your own computer, that you have to send the stylesheet via FTP to your host for every single change. You also have update the browser in order to see the outcome. Therefore it might be easier to make the changes in the stylesheet on the server.
If questions arise on what the certain codes stands for you may consult this page:
<a href="http://www.w3schools.com/css/default.asp " title="W3Schools.com">W3Schools.com</a>Text within these signs
/*comment*/will be omitted when a web browser reads the code, so there you may add your own notes.Happy Coding!