The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> HTML for Tumblr theme, Changing size
nwgilbert
post Aug 4 2012, 03:03 PM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 4-August 12
Member No.: 17,559
Hello, I'm using a template (theme) found on tumblr for my blog page.
I have continually adjusted the theme to be suitable for me and can be now considered a custom theme.

I am using my tumblr blog page with static pages as a online portfolio of my work.
The problem I have encountered is changing the size of the type of the links which states the static pages (routes denim, blueprint magazine etc.)

You can see this at http://www.nickgilbert.co.uk

Can someone help me with a html solution for changing the type size of these static pages on the navigation as I have tried adjusting the HTML many times.


Thanks,

Nick happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 5 2012, 01:55 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 7,852
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
How have you tried changing the font size? Right now, it looks like the font size for everything is set by the CSS.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nwgilbert
post Aug 5 2012, 03:53 AM
Post #3


Newbie
*

Group: Members
Posts: 11
Joined: 4-August 12
Member No.: 17,559
All HTML is shown below


-----------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="color:Page" content="#ffffff"/>
<meta name="color:Text" content="#222222"/>
<meta name="color:Minor Text" content="#777777"/>
<meta name="color:Borders" content="#aaaaaa"/>
<meta name="color:Link" content="#145091"/>
<meta name="color:Active Link" content="#2c3a49"/>
<meta name="color:Highlight" content="#eeeeee"/>

<meta name="font:Body" content="Georgia, serif"/>
<meta name="font:Heading" content="Helvetica Neue"/>
<meta name="font:Quote" content="Palatino, 'Palatino Linotype', serif"/>
<meta name="font:Capitals" content="Palatino, 'Palatino Linotype', serif"/>

<meta name="if:Show people I follow" content="0"/>
<meta name="if:Link to submit a post" content="0"/>
<meta name="if:Link for large images" content="1"/>

<meta name="text:About page URL" content=""/>

<meta name="text:Disqus Shortname" content="" />

<title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fi
eldset,legend,input,textarea{margin:0;padding:0;}
html{font-size:100.01%;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal;}
abbr,acronym{border:0;}

body {background:{color:Page}; color:{color:Text}; font:1em/1.5 {font:Body};}

h1, h3 {font-family:{font:Heading};}
pre,code {font-family:'Inconsolata','Monaco','Consolas','DejaVu Sans Mono',monospace;}

a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Active Link};}

#border {background:{color:Borders}; position:fixed; left:0; top:0; bottom:0; width:0.5em;
border-right:0.125em solid {color:Highlight};}

#header {color:{color:Minor Text}; position:absolute; top:3em; left:2em;
width:11em;}
#header h1 {font-weight:bold; font-size:1.0em; line-height:1.5;
text-transform:lowercase; margin:0.725em -0.5em 0.75em 0;
letter-spacing:-1px; word-spacing:1px;}
#header h1 a:link, #header h1 a:visited {color:{color:Text}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Active Link};}
#description {font-size:0.74em; line-height:1.775; margin-bottom:2.0em;}
#header form {margin-bottom:1.4em;}
#header form input {width:90%;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform;}{style="text-transform:uppercase;"}
#header li a {background:{color:Page}; display:block; padding:0 0.25em;
text-decoration:none;}
#header li a:hover {background:{color:Highlight};}

#links p {text-transform:uppercase; margin:0;}
#links ul {margin:0 0 1.5em 1.25em;}
#links ul li {text-transform:none; font-size:0.6em; line-height:1.875;}
#links abbr {font-size:1em;}

#posts {margin:0 1.5em 0 15em; padding:4.5em 0 1.5em;}
#posts .post {list-style:none; margin:-1px 0 0; padding-bottom:2.875em; max-width:50em;
clear:both; border-top:1px solid {color:Borders};}
#posts .content {color:{color:Text}; padding-top:0.125em; margin-right:10.5em;}

#footer {margin:0 1.5em 0 15em; max-width:50em; padding-top:1.5em;
border-top:1px solid {color:Borders};}
#pagination p {font-size:1.25em; min-width:10em; line-height:1.2; margin:0 0 2.4em;
white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:1.5em;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:0.8em/1.875 {font:Capitals};
margin-bottom:1.875em; text-transform:uppercase;}
.avatars {clear:both; color:{color:Minor Text};}
.avatars span {float:left; display:inline; width:108px; line-height:36px;}
.avatars a {float:left; display:inline; padding:0 6px 6px 0;}
.avatars img {vertical-align:middle;}
#colophon {clear:both; color:{color:Minor Text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:underline;}

p {margin-bottom:1.5em;}
form .submit {height:0; overflow:hidden; display:block;}

.meta {float:right; clear:right; width:9.25em;}
.meta h2 {margin-bottom:1.5em; border-top:0.125em solid {color:Borders};}
.meta h2 a {text-decoration:none; display:block; padding:0 0.25em;}
.meta h2 a:hover {background:{color:Highlight};}
.meta p {color:{color:Minor Text}; font-style:italic; margin:0 0 0 1em;
text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor Text}; font-style:italic; margin:0;
width:8.25em; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .comments_link {color:{color:Minor Text}; margin:0;
width:8.25em; text-indent:-0.75em; text-transform:lowercase;}
.meta .notecount, .meta .plays {font-weight:bold; font-style:normal;}
.reblog a, .tags a {display:block; margin-left:0.75em;}

h3 {font-size:1.25em; line-height:1.2; padding:0.6em 0; font-weight:bold;}

.content a {border-bottom:1px solid {color:Borders};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:1.5em;}
.content ul li {list-style:square;}

blockquote {margin:0 1.5em 1.5em; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:1em; line-height:1.5;}
pre {background:{color:Highlight}; margin:0 -0.75em 1.5em; padding:0.75em;
overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor Text};}

ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}

abbr, acronym, .caps {font-size:0.9em; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {font-variant:small-caps;}
.caps {text-transform:uppercase;}

.clear {clear:both; visibility:hidden; height:0; overflow:hidden;}

.text, .caption {margin-bottom:1.5em;}
.post img, .post object, .post embed {max-width:100%;}

.link-post h3 {padding:0.6em 0; margin-bottom:1.2em;}

.photo-post .photo, .video-post .video {margin-bottom:1.5em;}

.quote-post .quote {font-family:{font:Quote};}
.quote-post .source, .cite
{float:right; margin:0 3em 1.5em 4.5em; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
{font-variant:small-caps; letter-spacing:0.1em;}
.short-quote .quote, .medium-quote .quote
{font-size:1.2em; line-height:1.25; margin:1.25em;}
.long-quote .quote {margin:1.5em;}

.audio-post .audio {height:2.25em; padding-top:2.25em;}
.audio-post .audio_player {width:207px; margin:-13px auto 0;}

.chat-post ol {list-style:none; margin:1.5em 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
.chat-post .speaker6 .label, .chat-post .speaker8 .label
{color:{color:Minor Text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{font-variant:small-caps; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{font-family:{font:Heading};}

#disqus_thread {clear:both; margin: 3em 0 1.5em; padding-top: 25px; border-top:1px solid {color:Highlight};}

.postnotes {clear:both; margin:3em 0 1.5em; border-top:1px solid {color:Highlight};}
.notes {color:{color:Highlight}; padding-top:1.5em; margin-top:-1px;}
.notes .action {color:{color:Minor Text};}
.notes a {display:none;}
.notes .action a, .notes blockquote a {display:inline; text-indent:0; margin:0; padding:0;}
.notes a:link, .notes a:visited {color:{color:Text};}
.notes li {margin-bottom:1.5em;}
.notes .avatar, .notes .clear {display:none;}
.notes blockquote {line-height:1.875; font-size:0.8em; margin:0 0 0 1.875em;}
.notes blockquote a {border-width:0 !important;}

.day .month {font-variant:small-caps;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}

.content.text-post img {max-width:100%;}

{CustomCSS}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#border {display:none;}
body {border-left:0.5em solid {color:Borders};}
</style>
<![endif]-->
</head>
<body>
<div id="border"></div>

<div id="header">
<h1><a href="/">{Title}</a></h1>
{block:Description}<p id="description">
{Description}
</p>{/block:Description}

<form action="/search" method="get">
<input type="search" placeholder="Search…" name="q" value="" size="15"/> 
<span class="submit"><input type="submit" value="{lang:Search}"/></span>
</form>

<ul>
{block:IfAboutPageURL}
<li><a href="{text:About page URL}">{lang:About}</a></li>
{/block:IfAboutPageURL}
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
<li><a href="/archive">{lang:Archive}</a></li>
<li><a href="{RSS}">{lang:Subscribe}</a></li>
{block:IfLinkToSubmitAPost}
<li><a href="/submit">Submit a post</a></li>
{/block:IfLinkToSubmitAPost}
</ul>

<!--
<div id="links">
<p>Links:</p>
<ul>
<li><a href="http://">Twitter</a></li>
<li><a href="http://">Flickr</a></li>
<li><a href="http://">Last.fm</a></li>
</ul>
</div>
-->
</div>

<ol id="posts">
{block:Posts}
<li class="post" id="post{PostID}">
<div class="meta">
<h2>

</h2>

{block:Date}{block:IfDisqusShortname}<a href="{Permalink}#disqus_thread" class="meta comments_link"></a>{block:IfDisqusShortname}{/block:Date}

{block:NoteCount}<p class="meta">
{lang:Notes}:
<span class="notecount">{NoteCount}</span>
</p>{/block:NoteCount}

{block:RebloggedFrom}<p class="reblog">
{lang:Reblogged from ReblogParentName 2}
</p>{/block:RebloggedFrom}

{block:HasTags}<p class="tags">
{lang:Tags}:
{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
</p>{/block:HasTags}
</div>

{block:Text}
<div class="content text-post">
{block:Title}<h3><span>{Title}</span></h3>{/block:Title}

<div class="text">{Body}</div>
</div>
{/block:Text}

{block:Photo}
{block:HighRes}{block:IfLinkForLargeImages}
<p class="meta">
image: <a href="{PhotoURL-HighRes}">{lang:Download}</a>
</p>
{/block:IfLinkForLargeImages}{/block:HighRes}
<div class="content photo-post">
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
</div>

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}

{block:Quote}
<div class="content quote-post {Length}-quote">
<blockquote class="quote">{Quote}</blockquote>

{block:Source}<div class="source">— {Source}</div>{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class="content link-post">
<h3 class="link"><a href="{URL}">{Name}</a></h3>

{block:Description}<div class="caption">{Description}</div>{/block:Description}
</div>
{/block:Link}

{block:Chat}
<div class="content chat-post">
{block:Title}<h3>{Title}</h3>{/block:Title}

<ol class="chat">
{block:Lines}<li class="{Alt} speaker{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
<span class="line">{Line}</span>
</li>{/block:Lines}
</ol>
</div>
{/block:Chat}

{block:Video}
<div class="content video-post">
<div class="video">{Video-400}</div>

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}

{block:Audio}
<p class="meta">{lang:Plays}: <span class="plays">{FormattedPlayCount}</span></p>
<div class="content audio-post">
<div class="audio">{AudioPlayerBlack}</div>

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Audio}

<div class="clear"> </div>

{block:IfDisqusShortname}
{block:PermalinkPage}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
{/block:PermalinkPage}
{/block:IfDisqusShortname}

{block:PostNotes}<div class="postnotes">
{PostNotes}
<div class="clear"> </div>
</div>{/block:PostNotes}

</li>
{/block:Posts}
</ol>

<div id="footer">
<div id="pagination">
{block:Pagination}
<p class="back"> {block:NextPage}
<a href="{NextPage}">{lang:More}</a> →
{/block:NextPage}</p>
<p class="forward">{block:PreviousPage}
← <a href="{PreviousPage}">{lang:Back}</a>
{/block:PreviousPage} </p>
<p class="page">
{lang:Page CurrentPage of TotalPages}
</p>
{/block:Pagination}

{block:PermalinkPagination}
{block:PreviousPost}<p class="back">
<a href="{PreviousPost}">{lang:Older}</a> →
</p>{/block:PreviousPost}
{block:NextPost}<p class="forward">
← <a href="{NextPost}">{lang:Newer}</a>
{/block:NextPost}</p>
{/block:PermalinkPagination}

{block:DayPagination}
{block:PreviousDayPage}<p class="back">
<a href="{PreviousDayPage}">{lang:Previous day}</a> →
{/block:PreviousDayPage}</p>
{block:NextDayPage}<p class="forward">
← <a href="{NextDayPage}">{lang:Next day}</a>
</p>{/block:NextDayPage}
{/block:DayPagination}
</div>

{block:IfShowPeopleIFollow}
{block:GroupMembers}
<p id="members" class="avatars">
<span>{lang:Members}:</span>
{block:GroupMember}
<a href="{GroupMemberURL}"><img
src="{GroupMemberPortraitURL-30}" alt="[{GroupMemberName}]"
title="{GroupMemberTitle} ({GroupMemberName})"/></a>
{/block:GroupMember}
</p>
{/block:GroupMembers}

{block:Following}
<p id="following" class="avatars">
<span>{lang:Following}:</span>
{block:Followed}
<a href="{FollowedURL}"><img
src="{FollowedPortraitURL-30}" alt="[{FollowedName}]"
title="{FollowedTitle} ({FollowedName})"/></a>
{/block:Followed}
</p>
{/block:Following}
{/block:IfShowPeopleIFollow}

<p id="colophon">




<font size="2">© 2012 All Rights Reserved.
</div>

{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 5 2012, 04:04 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 3,541
Joined: 23-August 06
From: Europe
Member No.: 9
The code from Tumblr isn't plain HTML. It needs to be parsed by some Tumblr script to render as HTML in the browser.

Currently, the links on the left inherit the font-size from BODY, which is set to 1em (= 16px in general).

You can set a font-size for #header li a or for A in general in the CSS.
I don't know how to do that in Tumblr though, as I'm not familiar with it.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nwgilbert
post Aug 5 2012, 04:42 AM
Post #5


Newbie
*

Group: Members
Posts: 11
Joined: 4-August 12
Member No.: 17,559
Ok, I tried adjusting the body text which changed everything on the page to a smaller scale.

body {background:{color:Page}; color:{color:Text}; font:0.5em/1.0 {font:Body};}

The only thing is I wanted to keep everything else scaled as it is and change only the page links on the navigation.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 5 2012, 07:19 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 3,541
Joined: 23-August 06
From: Europe
Member No.: 9
This is the line you need to change:

#header li a {background:{color:Page}; display:block; padding:0 0.25em;
text-decoration:none;}

Add the desired font-size to that, but NOT the rules for body (which BTW I don't see you did when looking again in your online page).


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nwgilbert
post Aug 5 2012, 07:33 AM
Post #7


Newbie
*

Group: Members
Posts: 11
Joined: 4-August 12
Member No.: 17,559
Thats great it worked just fine, thanks very much.
One other thing I was wondering is I want to drop the left hand side of the navigation so that "@nwgilbert" is aligned with the line towards the right for the content box.

Any ideas on how to adjust this from the coding shown above?

This post has been edited by nwgilbert: Aug 5 2012, 07:35 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 5 2012, 10:03 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 3,541
Joined: 23-August 06
From: Europe
Member No.: 9
If I understand correctly, you wish to push down the entire #header, with navigation included, to align vertically with the content on the right.

In that case, since you positioned the #header absolute, you can set a higher top to it, e.g. 8.5em. Or, set a margin-top high enough to #header h1, e.g. margin: 6.25em -0.5em 0.75em 0;

You might need to calculate and adapt those values, as I only applied them on the eye.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 21st May 2013 - 09:51 AM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC