I want to create the h1 header as an example below. I saw this type of header at some website which I could not remember it's address right now. If I'd remember, I'd copy it from their website. Unfortunally I forgot. Here's the the PSD screen-shot:
(source: hizliresim.com)
Anyway, no matter what I've tried I still could not get the result. What I got is:
(source: hizliresim.com)
Here's my code:
div.big-header div.header-left h1 {
float: left;
color: #fff;
background: #c00000;
font: bold 35px "Open Sans";
padding: 1px 5px;
margin-bottom: 35px;
}
and here's JSFiddle
Question: How can I create the header as example above (first picture)
Try like this: Demo
Updated Demo
Update: Just added display:inline, line-height with box-decoration-break along with your code..
CSS:
h1 {
color: #fff;
background: #c00000;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
/* newly added code */
display:inline;
line-height:44px;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
Use a span inside your h1:
h1 {
float: left;
color: #fff;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
}
h1 > span {
background: #c00000;
}
And:
<h1><span>How to create a page with PHP?</span></h1>
Related
I try to style WP-filebase pagination in a page. I have used WP-pagenavi in blog articles and I got it to look as I wanted: The numbers are in boxes side by side.
As I haven't found the way to use WP-pagenavi with WP-filebase (I also read that it doesn't work with pages in WP) I have tried to style the pagination in WP-filebase to look the same, but I only get the numbers in boxes side by side BUT white space between them.
I tried to use margin-left to get rid of the white space, but then I got other problems. The border while hovering is not showing on the right. It seems that the boxes are overlapping each other on the right-side. How to fix this with css?
My css looks like this:
.tablenav-pages {
clear: both;
border-radius: 0;
font-family: 'Gotham A','Gotham B', sans-serif;
font-weight: 300;
padding: 6px 14px;
font-size: 15px;
/* margin-left: 6px;*/
}
.tablenav-pages a, .tablenav-pages span {
text-decoration: none;
color: #a30083;
background-color: #fff;
border: 1px solid #ddd;
padding: 6px 14px;
/* margin-left: -6px;*/
}
.tablenav-pages a:hover {
border-color: #a30083;
background-color: #fff;
padding: 6px 14px;
}
.tablenav-pages span.current {
background-color: #a30083;
border-color: #a30083;
color: #fff;
padding: 6px 14px;
}
div.tablenav-pages {
padding-left: 0;
padding-right: 0;
float: left;
}
Aila, you have spaces between your elements.
Ex:
<a class="prev page-numbers" href="../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=2">« Edellinen</a> <a class='page-numbers' href='../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=1'>1</a>
After removing the spaces, they are now flush together:
http://jsfiddle.net/yfp37mac/
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)
I cannot seem to change my .CSS (the file name is loginmodule.css)
I only wanted to change the font color to black.
I have edited this in Microsoft FrontPage,notepad++, notepad and it has already change but when I look it in the browser(Firefox beta, latest patch). It didn't change at all. I know I had not made a duplicate file and I am sure it is the same file I edited and opened from a browser(Firefox beta, latest patch). Is it because of the browser or something else?
body {
color: #666666;
margin: 0px;
background: #f8f7e5 url('images/abstract-bg.jpg') no-repeat center top;; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px
}
.textfield {
font-size: 11px;
color: #333333;
background: #F7F7F7;
border: 1px solid #CCCCCC;
padding-left: 1px;
}
h1 {
color: blue;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
color: #99CCFF;
border-bottom: 1px dashed #E6E8ED;
}
a {
color: #2D3954;
font-size: 11px;
}
a:hover {
color: #99CC00;
}
.err {
color: #FF9900;
}
th {
font-weight: bold;
text-align: left;
}
#content {
width: 860px;
margin: 238px auto 0;
background: #fff;
border: solid 1px #ccc;
padding: 20px;
}
If you want to be certain the file hasn't been cached by the browser, just append a query string to the CSS file declaration.
So inside your page/template, change the <link /> attribute like so
<link rel="stylesheet" type="text/css" href="/css/loginmodule.css?v=2" />
Alternatively, hold down CTRL and press F5 inside Firefox to do a hard refresh.
Browsers typically cache the CSS. Try closing all of your browser windows then viewing the file.
Things like that usually occur from browsers. I usually delete all history and clear cacheand it works fine. But make sure you have saved and uploaded the css to the correct directory. You can also try to view it in a browser that you don't use very often.
good luck.
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)