change appearance of <span style="font-weight:bold;">
newbie
Location: stockholm
Posted: Fri, 2007-10-05 19:13
Hello, new here 
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!
Regular
Posts: 22
Joined: 2007-09-30
Location: New York
yup
Posted: Fri, 2007-10-05 19:38
<style type="text/css">body{font-family:arial;}
b{font-family:times new roman;}
</style>
Like so: http://www.geocities.com/abbym805//tester.htm
Abby
<i>Go away or I will replace you with a very small shell script.</i>
Regular
Posts: 22
Joined: 2007-09-30
Location: New York
wait, did that answer your question?
Posted: Fri, 2007-10-05 19:44
Or do you need to use span, specifically? I've never bothered trying to mess with blogger.
Abby
<i>Go away or I will replace you with a very small shell script.</i>
newbie
Posts: 7
Joined: 2007-10-05
Location: stockholm
no unfortunatly :(
Posted: Fri, 2007-10-05 20:06
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
Regular
Posts: 22
Joined: 2007-09-30
Location: New York
...
Posted: Fri, 2007-10-05 20:11
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.
Abby
<i>Go away or I will replace you with a very small shell script.</i>
newbie
Posts: 7
Joined: 2007-10-05
Location: stockholm
Yeah, that was what I
Posted: Fri, 2007-10-05 20:29
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)..
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#494949" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#33C" value="#000000">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#fff" value="#ffffff">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#33CCFF">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#fff" value="#ffffff">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#ffffff">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 109% Times, serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 100% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 100% futura, century gothic, trebuchet">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 1% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 70% Courier, monospace">
*/
#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;
}
]]></b:skin>
</head>
<body bgcolor='#595959'>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<img src='http://www.fetatyper.se/dump/dbtyanimation.gif' width='444'/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blogginlägg' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Om mig' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Bloggarkiv' type='BlogArchive'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
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:
<div class='post-body entry-content'><p>test test l<span style="font-weight:bold;">test test</span> test test <span style="font-style:italic;">test </span>test test</p>
<div style='clear: both;'></div>
</div>
And it is all text between these little tags I want to change font and color at:
<span style="font-weight:bold;"></span>Sorry for being so confused, and thanks for trying to help!
Elder
Posts: 1672
Joined: 2005-11-20
Location: STL
http://help.blogger.com/bin/a
Posted: Fri, 2007-10-05 20:29
http://help.blogger.com/bin/answer.py?hl=en&answer=41954
all. <Dictionary.com http://dictionary.reference.com/browse/all>
Moderator
Posts: 9209
Joined: 2004-06-30
Location: Milton Keynes
Why the hell Blogger decides
Posted: Fri, 2007-10-05 20:44
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.
newbie
Posts: 7
Joined: 2007-10-05
Location: stockholm
Yeah! That was exactly the
Posted: Fri, 2007-10-05 21:22
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
when I wrote
span[style="font-weight:bold;"] {color: pink;}Thanks alot Thepineapplehead! Problem: Solved.
Elder
Posts: 1672
Joined: 2005-11-20
Location: STL
You check IE6 yet?
Posted: Fri, 2007-10-05 21:28
You check IE6 yet?
all. <Dictionary.com http://dictionary.reference.com/browse/all>
Moderator
Posts: 9209
Joined: 2004-06-30
Location: Milton Keynes
IE6
Posted: Sat, 2007-10-06 10:08
Hence my cryptic:
Regular
Posts: 22
Joined: 2007-09-30
Location: New York
IE Should Be Banned
Posted: Sun, 2007-10-07 01:11
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.
Abby
<i>Go away or I will replace you with a very small shell script.</i>
newbie
Posts: 3
Joined: 2008-06-02
Location: Canada
I don't know why but this
Posted: Mon, 2008-06-02 22:52
This comment has been moved here.