Greasy Fork

How Do I Change the Font Style of Craigslist Ads?

I use a style for Craigslist. The CSS code is listed below. When I view an ad, the font style is in Times New Roman. I need it changeed to arial. This is for the font on the actual ad, not the font in the list of ads. I tried added and editing different codes like p and div, but seems that I'm not using the right code. What code can change the font style on the ad?


--------------------------
* {
background: #333 !important;
border-color: #7CE3DE !important;
color: #fff !important;
}

#p-lo1go a {
background-position:center center !important;
background-repeat:no-repeat !important;
}

a{
color: #8b8b8b !important;
}

/*Used f0dd74 before as visited link color*/
a:visited{
color: #f2b9d6 !important;
}

/*Original 79b9f2*/
a:link{
color: #b2d6f6 !important;
font-weight: bold !important;
}

a:hover, a:hover span {
color: #fff !important;
text-decoration: underline !important;
}

/*Secondary Background - Not Sure*/
#content, #content * {
background: #111 !important;
border-color: #7CE3DE !important;
}

/*Secondary Background*/
#content, #content * {
background: #131313 !important;
border-color: #7CE3DE !important;
}

#content {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

/*Panel Background*/
/*Used 59d8d2 as good border color*/
#toc, #toc * {
background: #222 !important;
border-color: #7CE3DE !important;
}

#toc {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

#p-cactions li.selected a, #p-cactions li a, #p-cactions li a:hover {
padding: 0 1em 0.1em !important;
}

#bodyContent pre {
background: #1a1a1a !important;
}

img[src*="/images/poweredby_mediawiki_88x31.png"], img[src*="/images/wikimedia-button.png"], img[src*="/Bookshelf-40x201_6.png"] {
width: 0px !important;
background: none !important;
}

.portlet li {
list-style-image: none !important;
}

ul {
list-style-image: none !important;
}

h1,h2 *{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
font-size:22px !important;
}

h3,h4 *{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
font-size:16px !important;
font-weight: bold !important;}

/*Text before fields*/
span *{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
font-size:16px !important;}

/*Some links*/
td *{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
font-size:16px !important;}

/*Overall elements, but bot sure*/
div *{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
font-size:16px !important;}

/*Some links*/
p *{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
font-size:17px !important;}
}

Do you have access to a browser like Firefox or Chrome? If you right-click the relevant area of the page and use Inspect Element, you can easily discover the page's tag structure. In this case, you need to add a rule for section since the site uses that like other sites use div.

Hi, Jefferson, good to hear from you again. I went into Inspect Element and found tags for body and title, please look below.

Interestingly, through Inspect Element, I disabled these tags through the toggle checkbox and the font style changed to Arial. But when I refreshed the page, it went back to Times New Roman. I don't know, but maybe Craigslist is blocking Arial from my code. Again, I don't know.

Anyway, you said I need to add a rule. Please let me know. Thanks.


#postingbody {
font-family: "Bitstream Vera Serif", "Times New Roman", serif;
}

.posting .postingtitle {
clear: left;
font-family: "Bitstream Vera Serif", "Times New Roman", serif;
font-size: 1.4em;
font-weight: 700;
line-height: 1.4em;
margin: 10px 0px;
}


*******EDIT*******
Hi, Jefferson.. Just to let you know, I copied a piece of code from another style and pasted it into my style. Now, the font style on the ad pages is rendered in Arial, which is what I want. But, the ad page is too big, Is there a way to reduce the font size of the ad page only? I'm talking about the page of the ad, not the page listing the ads. Please let me know. Thanks!

When I referred to section, I meant that the HTML tag is <section>

If you want to target a particular page, you need to find something unique about it. I don't use CL so I will let you or someone else poke around in it.

Yeah no problem.. If you could ask someone who knows this stuff, then I'd appreciate it. Thanks man!

I do not know anyone in real life who looks at web pages to change their CSS. I think your best hope is the online community.