12 replies [Last post]
mrlinus
Offline
newbie
stockholm
Last seen: 12 years 50 weeks ago
stockholm
Timezone: GMT+1
Joined: 2007-10-05
Posts: 7
Points: 0

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!

AbbyM
AbbyM's picture
Offline
Regular
New York
Last seen: 11 years 23 weeks ago
New York
Timezone: GMT-4
Joined: 2007-09-30
Posts: 23
Points: 0

yup

body{font-family:arial;}
b{font-family:times new roman;}

Like so: http://www.geocities.com/abbym805//tester.htm

Laughing out loud

Abby
Go away or I will replace you with a very small shell script.

AbbyM
AbbyM's picture
Offline
Regular
New York
Last seen: 11 years 23 weeks ago
New York
Timezone: GMT-4
Joined: 2007-09-30
Posts: 23
Points: 0

wait, did that answer your question?

Or do you need to use span, specifically? I've never bothered trying to mess with blogger.

Abby
Go away or I will replace you with a very small shell script.

mrlinus
Offline
newbie
stockholm
Last seen: 12 years 50 weeks ago
stockholm
Timezone: GMT+1
Joined: 2007-10-05
Posts: 7
Points: 0

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

AbbyM
AbbyM's picture
Offline
Regular
New York
Last seen: 11 years 23 weeks ago
New York
Timezone: GMT-4
Joined: 2007-09-30
Posts: 23
Points: 0

...

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
Go away or I will replace you with a very small shell script.

mrlinus
Offline
newbie
stockholm
Last seen: 12 years 50 weeks ago
stockholm
Timezone: GMT+1
Joined: 2007-10-05
Posts: 7
Points: 0

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:


test test ltest test test test test test test




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! Smile

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

http://help.blogger.com/bin/a

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

mrlinus
Offline
newbie
stockholm
Last seen: 12 years 50 weeks ago
stockholm
Timezone: GMT+1
Joined: 2007-10-05
Posts: 7
Points: 0

Yeah! That was exactly the

Yeah! That was exactly the kind of code I was expecting to see. Allthough I hoped it would work Smile

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

span[style="font-weight:bold;"] {color: pink;}
it worked!

Thanks alot Thepineapplehead! Problem: Solved. Laughing out loud

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You check IE6 yet?

You check IE6 yet? Wink

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

IE6

Hence my cryptic:

thepineapplehead wrote:
I'll let you figure out why unfortunately you can't use that elegant piece of code.

Verschwindende wrote:
  • CSS doesn't make pies

AbbyM
AbbyM's picture
Offline
Regular
New York
Last seen: 11 years 23 weeks ago
New York
Timezone: GMT-4
Joined: 2007-09-30
Posts: 23
Points: 0

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.

Abby
Go away or I will replace you with a very small shell script.

poisonrose
Offline
newbie
Canada
Last seen: 12 years 16 weeks ago
Canada
Joined: 2008-06-02
Posts: 3
Points: 0

I don't know why but this

This comment has been moved here.