I am working on a website for a customer creating my own theme for them, but I cant understand why the fonts are not registring it appears to be still in arial or something instead of robot but I have added the google font in my head its bringing the site into wordpress from flat php
Code i used to add robot is
<link href='//fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,900italic,900,700italic,700,500italic,400italic,500' rel='stylesheet' type='text/css'>
wordpress version http://webservices.davidbuckleyni.co.uk/wordpress/?page_id=8
live site
http://www.key2credit.com/
their is also a space above where the banner is im thinking i missing a reset script or something
Edit My bad here is the css showing the font being used for body
However i think its just the text within the main banner thats amiss ie where it says Fast cash loans
body {
padding-top: 120px;
padding-bottom:38px;
font-family: 'Roboto', sans-serif;
background: url("./.fs/img/banner2.jpg") repeat;
}
Edit to show here in head im calling this style sheet to reference the font
/wordpress/wp-content/themes/key2credit/style.css
It sounds like the h2 (and possibly your other header) tag styles are being overridden (as they're showing as inherit (or maybe another parent element it's contained within).
Try to specifically target the text in your banner. Add this to your CSS declaration on line 428 of style.css:
.homeBanner .homeBannerContent {
margin-top: 4%;
height: 315px;
font-family: 'Roboto', sans-serif;
}
Your text issue is quite simply happening because the block of T&Cs is set as position:absolute;bottom;0;left;0; meaning, it will float to the bottom left of it's parent container.
It's parent container is the .homeBannerContent div, which doesn't go down to the bottom of the banner. What I'd do, is take the T&Cs text, outside of the home banner content, and make the main banner div has position:relative;. That should stick it to the bottom left of the banner itself.
Or simply remove the position:absolute;bottom:0;left;0; properties from the CSS of the T&Cs box, and have it display as a standard block.
Related
I'm working on an Unbounce project and I can't get the stylesheets to work.
I wanted to change the font-size of the labels of an option on the form. I saw (using inspect element) that the following CSS created affects the size: #lp-pom-form-55 .lp-pom-form-field .option label
So I created a stylesheet in Unbounce like this:
<style>
#lp-pom-form-55 .lp-pom-form-field .option label {
font-size: 16px !important;
}
</style>
And it just doesn't work. I also tried it without the style tag like this:
#lp-pom-form-55 .lp-pom-form-field .option label {
font-size: 16px !important;
}
It still didn't work. I even tried basic things like setting the background color of normal text field id's to black !important with no solution.
What is the correct way to apply styles to Unbounce pages?
I've realized that the code within the <style> tags is the correct way to do it. The problem was that the custom CSS doesn't display in the designer view, it only shows on the live page.
I had a design sliced to html and it looked great. Then I converted it into a WordPress theme and a spacing appeared at the top of the website in every browser except FF. When turning to firebug the head tag seems to be empty and all html that should be there, appears to be in the body.
https://www.opolo.nl/kitchenaid/
Did anybody have this problem before and have a solution? Since this is a live website, I solved this by giving the header a position of absolute, but since a new project shows the same issue, I'm looking for a solution.
Foundation was used for the responsive part. Could it be WordPress and Foundation have problems? All javascript files are included by wp_register_script and wp_enqueue_script and are located in the footer. Moving them to the header didn't solve the problem.
you have a padding and font size set and something that counts as text within your body before your header
body{
padding: 0px !important;
font-size: 0px !important;
}
its not really a good idea to be setting dimensions for html body etc if not needed. a lot of code examples will style body tags so if using them you should change the container names from body to something else.
I have a Wordpress website and am trying to change the font size of the main menu. From Chrome, When I do an "inspect element" on the page I can see that the menu element is laid out thusly:
.blog-menu a {
font-size: 13px;
}
When I change the font-size to another value from within inspect element, the change is properly displayed on the page. However when I add the code:
.blog-menu a {
font-size: 25px;
}
to my style.css file, the change is not registered. Any thoughts as to what I'm doing wrong? Probably something stupid.
This can often be caused by styles being applied from your cache. To clear your cache and reload the page, pressing CMD/CTRL+Shift+R (Mac OSX and Windows, respectively).
If the new style is still not being applied, it's possible that another style is overriding it. This can be caused by a style being applied after your code, or before your code with the !important tag.
Some questions that may help you figure this out:
What does your environment look like? Is your style.css in a child theme's folder? Is another stylesheet being called after your style.css?
Updated as per comment conversation:
<style type="text/css">
.blog-menu a
{
font-size: 25px !important;
}
</style>
<div class="blog-menu">
<a>This should be 25px</a>
</div>
When I do inspect element on my wordpress page on the left of my screen I have this code,
<header class="main-header" role="banner">
on the right of my screen I have this code
background-image: url('http://chuaquanam.ca/wordpress/wp-content/uploads/2013/08/cropped-TopMenu11.jpg');
Can someone help me in what *.css file the background-image code is located? I looked at all css files like style.css but I could not find it.
Inspecting the header element shows that the CSS for header.main-header is inline. This means, it is generated by WP and embedded into the page, not into a CSS file. Once generated, you can see the code by viewing the source of your blog page:
<style type="text/css">
header.main-header
{
background-image: url('http://chuaquanam.ca/wordpress/wp-content/uploads/2013/08/cropped-TopMenu11.jpg');
width: 980px;
height: 200px;
}
.. which is on line 67 onwards.
The way for you to change your background-image is via the WP menu, if you select Appearance > Header, you can upload a new image, which will populate the width and height based on the image you upload.
If you want to edit styling other than these properties (like positioning, floating, etc.,) you can find the other header.main-header styling in style.css, line 253 onwards.
Can any one help me in printing a webgrid in landscape
You have to do this in CSS, defining a stylesheet appropriate for printing. You can't control the printer preferences from a browser.
In other words, is up to the user to select the paper orientation he wants to use. You can only "help it" a bit using appropriate styles for printing. Read here.
One common approach to this is to create a custom print CSS stylesheet. It can be pretty simple.
This short article will guide you through a simple example.
Once you grasp the concepts involved, you can add specific CSS for your web page.
Here are the basic steps:
1) Reset all the padding and margins:
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px;
letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif;
color: #000;}
2) Remove elements you don't want to print, such as the page header, logo, menus, etc. In your case, you may want to hide everything but the grid.
#logo, #catnavi, .topnavi, .more-link, .navigation, #sidebartop, #related, #social,
#sponsors, .tabs, #allpost, .toolbar, .splitbox, #commentform, #commentabs .idTabs,
.postmeta-content .comments, #respond h3, .tag, .footerlinks {display:none;}
3) Optionally, display the URL in the print document (hiding links will hide the URL)
4) Optionally, insert page breaks
#comments {page-break-before: always;}
5) Add a <link> tag at the top of the page to include the .css file.