test test ltest test test test test test test
Hello, new here :rolleyes:
I am re-designing a blogg for me and my friends (right now, I have made a testblog while im in the designing phase: www.dbtytest.blogspot.com) using blogger.
I am almost done with what I think is a fairly looking thing, but I have a problem that I would like to solve.
When people write a post in blogger and want to make the text bold, they click this little "B"-button that makes a around the marked word.
And I want to change the font of this to, but without editing the tag itself. Is it possible to reach this tag somehow so that everything that is marked with is also changed from times to arial?
My friends do not know a thing about tags and codes so if I want the bold to look as I want to, I will have to do it this way, is it possible?
thanks alot!
yup
body{font-family:arial;}
b{font-family:times new roman;}
Like so: http://www.geocities.com/abbym805//tester.htm
wait, did that answer your question?
Or do you need to use span, specifically? I've never bothered trying to mess with blogger.
no unfortunatly :(
yeah, exactly. In fact, you could say that I only can change in the head-part of the code, so I cant change the fact that the is created. What I need to do is to find a way to control that tag without editing the tag itself.. Am i making any sense or does this sound as stupid as I think?
thanks
...
k, well, maybe it would help if you showed us the code. *hint hint*
whatever the name of the class is, you should be able to do the same thing, ie:
.whatever bold{font-family:times new roman;}
I don't know what your class is called though.
Yeah, that was what I
Yeah, that was what I thought at first, but it didnt work!
I'll post the codes, allthough it is alot of code, and kind of messy (im not the original author behind this, I just modified the looks alot).. :scared:
<?xml version="1.0" encoding="UTF-8" ?>
*/
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
body
{
margin-top:0px;
}
/* Use this with templates/template-twocol.html */
body {
margin:0;
color:#000000;
font: futura, century gothic, trebuchet;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
font-size: 12px;
color: #FF6666;
text-decoration: none;
text-transform: uppercase;
line-height:12px;
background-color: #ffd1d1;
font-family: futura, century gothic, arial;
}
a:visited {
font-size: 12px;
text-transform: uppercase;
color: #50c4ba;
text-decoration: none;
line-height:12px;
background-color: #caedea;
font-family: futura, century gothic, arial;
}
a:hover {
color:#fcfe5a;
text-decoration:underline;
}
a.img {
border-width:0;
border-color: #ffffff;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 0px;
border:0px solid $bordercolor;
background-color: #ffffff;
background-position: left;
}
#header-inner {
background-position: left;
padding:0px;
}
#header {
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:0px 0px 0em;
line-height:0,1em;
text-transform:uppercase;
letter-spacing:.0em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 0px 0px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 0.0em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-left: auto;
margin-right: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 740px;
margin:0 auto;
padding:2px;
text-align:left;
font: $bodyfont;
background-color: #ffffff;
border: 1px;
border-color: #000000;
}
#main-wrapper {
width: 445px;
padding: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background-color: #ffffff;
}
#sidebar-wrapper {
width: 248px;
float: right;
padding:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background-color: #ffffff;
border-left-color: #000000;
border-left-style: dotted;
border-left-width: 1px;
}
/* Headings
----------------------------------------------- */
h2 {
font-size: 9px;
color: #FF6666;
margin:1.5em 0 .5em;
font-weight: lighter;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
background-color: #ffd1d1;
font-family: futura, century gothic, arial;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
font-size: 8px;
color: #FF6666;
line-height:12px;
text-transform:uppercase;
background-color: #ffd1d1;
font-family: futura, century gothic, arial;
}
.post {
margin:.2em 0 1.5em;
border-bottom:1px dotted #494949;
padding-bottom:1.5em;
color: #000000;
font-family: times, georgia;
letter-spacing: 2px:
}
.post bold {
margin:.2em 0 1.5em;
border-bottom:1px dotted #494949;
padding-bottom:1.5em;
color: #00ff00;
font-family: helvetica, times, georgia;
letter-spacing: 2px:
}
.post h3 {
display:block;
text-decoration: none;
color:#ff6666;
font-family: Helvetica, Arial, Verdana, san-serif;
font-weight: bold;
letter-spacing: -2px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration: none;
text-transform: none;
color:#ff6666;
font-family: Helvetica, Arial, Verdana, san-serif;
font-size: 40px;
line-height: 30px;
font-weight: bold;
letter-spacing: -2px;
border-bottom: dotted 1px #595959;
background: none;
}
.post h3 strong, .post h3 a:hover {
color:#fcf35a;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
font-size: 8px;
letter-spacing:.1em;
font-family: futura, century gothic, arial;
line-height: 1.4em;
}
a.timestamp-link {
font-size: 8px;
color: #FF6666;
text-decoration: none;
line-height:12px;
background-color: #ffd1d1;
font-family: futura, century gothic, arial;
}
a.comment-link {
font-size: 8px;
color: #FF6666;
text-decoration: none;
line-height:12px;
background-color: #ffd1d1;
font-family: futura, century gothic, arial;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
font-size: 9px;
font-family: futura, century gothic, arial;
line-height: 1.4em;
}
.headerfont {
margin:1.5em 0 .5em;
font-size: 8px;
color: #FF6666;
line-height:12px;
background-color: #ffd1d1;
font-family: futura, century gothic, arial;
}
div.sidebar li a {
font-size: 10px;
color: #50c4ba;
text-decoration: none;
line-height:12px;
background-color: #ffffff;
font-family: futura, century gothic, arial;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
line-height:0.5em;
background: none;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:6 0 0.5em;
padding:0 0 0.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 5px 500px 5px 5px;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin: .75em 0;
color:#494949;
text-transform:uppercase;
font-size: 10px;
font-family: futura, century gothic, arial;
line-height: 1.4em;
}
.profile-datablock {
margin:.5em 0 .5em;
color:$sidebarcolor;
text-transform:uppercase;
font-size: 10px;
font-family: futura, century gothic, arial;
line-height: 1.4em;
}
.profile-textblock {
color:$sidebarcolor;
text-transform:uppercase;
font-size: 10px;
font-family: futura, century gothic, arial;
line-height: 1.4em;
}
.profile-link {
color:$sidebarcolor;
text-transform:uppercase;
font-size: 8px;
font-family: futura, century gothic, arial;
line-height: 1.4em;
}
a.profile-link {
color:#50c4ba;
text-transform:uppercase;
font-size: 10px;
background-color: #ffffff;
font-family: futura, century gothic, arial;
line-height: 1.4em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]>
skip to main |
skip to sidebar

Also I cut out the part that controls the text for each post, so you dont have to look through all that code:
.post {
margin:.2em 0 1.5em;
border-bottom:1px dotted #494949;
padding-bottom:1.5em;
color: #000000;
font-family: times, georgia;
letter-spacing: 2px:
}
And, as you can see, I cant see the post themselves here, so I cant change the tags, but here is a cut-out from the source of the blog:
And it is all text between these little tags I want to change font and color at:
Sorry for being so confused, and thanks for trying to help!
http://help.blogger.com/bin/a
Why the hell Blogger decides
Why the hell Blogger decides to wrap it in a span with a class is beyond me, if it's going to be bold they should use the STRONG or EM elements.
To answer your question, to target any span with a style of bold, eg:
span style="font-weight:bold;"
you could use this CSS:
span[style="font-weight:bold"] {color: pink;}
I'll let you figure out why unfortunately you can't use that elegant piece of code.
Yeah! That was exactly the
Yeah! That was exactly the kind of code I was expecting to see. Allthough I hoped it would work
I even tried it on a blank file from my computer and it works like water. But I dont have clue why it doesnt work on my blog?
But it sound as if I should give up huh?
thanks alot!
Edit: Actually, right after I posted this, I figured it out! it was a semi-colon ( ; ) that was missing :bigoops: when I wrote
it worked!
span[style="font-weight:bold;"] {color: pink;}
Thanks alot Thepineapplehead! Problem: Solved.
You check IE6 yet?
You check IE6 yet?
IE6
Hence my cryptic:
I'll let you figure out why unfortunately you can't use that elegant piece of code.
IE Should Be Banned
Nah, seriously. But why would Blogger not give the class a name?! That is the most inane piece of coding I have ever seen! Who wants to write style="whatever;" in the middle of their html when it could be solved with a stylesheet!
But I guess all of us on this forum might be biased, lol.