WordPress.org

Forums

creating a blank line on template page without distortion (20 posts)

  1. addcoach
    Member
    Posted 10 years ago #

    How do I create a blank line on a wordpress template page? i.e., I want more space between my tagline and the rest of the header.php section of my custom template?

    I've tried the' <br/>' but it hasn't worked.

    also tried ' <li

  2. and didnt work

    both have put strange code on my the top of my blog

    thanks

    Pete

  • Mark (podz)
    Support Maven
    Posted 10 years ago #

    One way is to use css to increase margins / padding
    Another is to create a div with nothing inside it for which you can do the same.
    Got a page we can look at and you indicate the problem area ?

  • addcoach
    Member
    Posted 10 years ago #

    Hi Podz,

    it's http://www.adultaddstrengths.com

    how exactly would i write the code? i've tried '<div id=></div>' and '<div></div>'
    and nothing changes.

    here's the area with the code

    '<h1 id="header">"><?php bloginfo('name'); ?></h1>

    <?php bloginfo('description'); ?>

    <div id="navcontainer">

      '
      thanks

      Pete

  • Mark (podz)
    Support Maven
    Posted 10 years ago #

    Have a look at my blog, and the karma line.
    That is produced as so: http://paste.uni.cc/7153

    Any help ?

  • Jinsan
    Member
    Posted 10 years ago #

    if you want to place a break line then you need to place a space after the br then the / and then the closing otherwise it won't work unless that is what you did and it didn't work. so <br<space>/>

  • techwench
    Member
    Posted 10 years ago #

    try changing this line in your stylesheet:
    h1#header
    {
    background: url(images/himmel.jpg);
    width: 729px;
    height: 205px; <--------------- this line
    margin: 0;
    padding: 0;
    text-align: left;
    }

    Change 205px to something else. 215px or 220px.

  • addcoach
    Member
    Posted 10 years ago #

    Hi Podz,

    I've tried it with

    '<br <space>/>' with a space only after the br and got this result ADD Knowledge+Awareness+Coaching+Action+Support= Adult ADD Strengths
    /> '

    I've tried it with a '<br <space> />' space after the br and before the / and got this result at top of page

    '!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> '

    graphic then
    ADD Knowledge+Awareness+Coaching+Action+Support= Adult ADD Strengths
    /> '

    I've tried it with '<br<space> />' with a space only before the / and got ADD Knowledge+Awareness+Coaching+Action+Support= Adult ADD Strengths
    />'

    'ADD Knowledge+Awareness+Coaching+Action+Support= Adult ADD Strengths
    />

    i've tried '<br <space> />' with a space after the br and before the / and got this at the top of page
    '!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> '

    and ADD Knowledge+Awareness+Coaching+Action+Support= Adult ADD Strengths
    />' below.

    not sure what to do. I don't really know php very well.

    thanks

    Pete

  • clydejones
    Member
    Posted 10 years ago #

    Why not try something like this in your CSS:

    .tagline {
    margin: 0;
    padding: 10px 0;
    }

    Now you should be able to enclose it all in a <div class="tagline"></div>

    You'll have a 10px space at the top and bottom of that line.

  • addcoach
    Member
    Posted 10 years ago #

    Hi Clyde,

    I tried that both with the # before the tagline and the . before the word tagline and the # before it and both. Didn't work. I put them near the bottom of my themes css is it the right place? do i need any other code?

    thanks Pete

    '<div class="tagline"></div>' was put in header.php

    '#searchform input
    {
    background: #FFFFFF;
    border: 1px solid #6F6F6F;
    font-size: 11px;
    margin-top: 3px;
    padding: 2px;
    }

    .tagline {
    margin: 0;
    padding: 10px 0;
    }

    p.credit'

  • addcoach
    Member
    Posted 10 years ago #

    Hi Techwench,

    I've tried your suggestion but it just put some extra grey space above the tagline. Do you know what the CSS tag is for the tagline?

    Podz,

    I can't understand what to do from your karma line. I've tried playing around with different combinations of your code, but it doesn't work. What specifically should i put below the code for the tagline to get an extra line of white space?

    thanks

    Pete

  • Monika
    Member
    Posted 9 years ago #

    I hope I've understood.
    you would like to habe more space ---between header and your content

    margin is the space between two tags
    padding is the space inside

    margin:0
    create no space between h1 and div class content i.e.
    margin:1px 3px 4px 6px
    create a space of 1px --->top
    a space of 3px---> right side
    a space of 4px -->bottom
    a space of 6px --->left side
    please notice the margin of a parent tag is law for the children tag ;-)

    best regards
    Monika

  • addcoach
    Member
    Posted 9 years ago #

    hi Monika,

    actually I'd like more space between the tagline and the rest of the content. I don't know what the heading code is for the tagline in the css file of northern web coders.

    here's a list of some of the names for css tags he has for the theme.
    do you know which one it might be? is there a parent tag for the tagline?

    is there a place where it explains what each tag means? ie i eventually want to also increase the font size of the titles of each post and add more space between the posts but I'm not sure which tag is the title.

    a

    a:hover

    #rap

    h1#header

    h1#header a

    h1#header a:hover

    #content

    #content h2

    #content h2#comments a

    #content h3 img

    #content div.post

    #content p

    #content div.post p, #content div.post li

    #content div.post div.storycontent p

    #content div.post div.storycontent ul, #content div.post div.storycontent ol

    #content div.post div.storycontent li

    #content div.post div.storycontent blockquote

    #content h3

    #content h3.storytitle, #content h3.storytitle a

    #content h3.storytitle a:hover

    #content div.post p

    #content div.post div.meta, #content div.post div.meta a

    #content div.post div.meta li a:hover

    #content div.post div.meta ul, #content div.post div.meta li

    thanks

    Pete

  • Monika
    Member
    Posted 9 years ago #

    Hi Pete
    sorry I'm so late, but I've trouble to find this post ;)

    in your browsers menueline horizontal you found
    'view'--> sourcecode ( or similar)
    there you'll find out what you need to prepare

    if not
    give me a link to your site AND to your css file
    and I'll try to figure it out

    Monika

    edit
    Hi Pete is this your site
    http://www.mattjonesblog.com/

    if...you have *hard coded css in your templates like font-size=...

    so you could do in your css what you want..it can't work for you
    ;)

  • matt510
    Member
    Posted 9 years ago #

    Nope, that is my blog.

  • addcoach
    Member
    Posted 9 years ago #

    hi Monika, it's http://www.adultaddstrengths.com

    here's the source code from the header.php file

    '<?php wp_head(); ?>
    </head>
    <body>
    <div id="rap">

    <h1 id="header">"><?php bloginfo('name'); ?></h1>

    <?php bloginfo('description'); ?>

    <div id="navcontainer"> '

    here's the CSS source code, trying to find a link doesn't seem to work
    thanks

    Pete

    style.css

    '/*
    Theme Name: Northern-Web-Coders
    Theme URI: http://www.northern-web-coders.de/
    Description: Northern-Web-Coders Theme
    Version: 1.0 story title #5F707A

    Author: Kai Ackermann
    */

    body
    {
    background: #99CCFF;
    font-family: Lucida Grande, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    a
    {
    font-size: 12px;
    color: #495865;
    }

    a:hover
    {
    color: #6F6F6F;
    }

    #rap
    {
    background: #FFFFFF;
    margin: 0 auto 0 auto;
    width: 729px;
    text-align: left;
    border: 3px solid #5F707A;
    }

    h1#header
    {
    background: url(images/himmel.jpg);
    width: 729px;
    height: 205px;
    margin: 0;
    padding: 0;
    text-align: left;
    }

    h1#header a
    {
    position: relative;
    top: 170px;
    left: 10px;
    font-size: 24px;
    background: transparent;
    padding: 5px;
    color: #FEF4E2;
    text-decoration: none;
    }

    h1#header a:hover
    {
    position: relative;
    top: 170px;
    left: 10px;
    font-size: 24px;
    background: transparent;
    padding: 5px;
    color: #5F5F5F;
    text-decoration: none;
    }

    #content
    {
    position: relative;
    left: 30px;
    float: left;
    padding: 0;
    width: 450px;
    color: #495865;
    font-size: 11px;
    }

    #content h2
    {
    border-bottom: 1px solid #6F6F6F;
    color: #5F707A;
    font-size: 12px;
    margin: 20px 0 5px 0;
    padding: 0 0 3px 0;
    text-align: right;
    width: 440px;
    }

    #content h2#comments a
    {
    color: #5F707A;
    font-size: 14px;
    }

    #content h3 img
    {
    border: 0;
    }

    #content div.post
    {
    margin: 0 0 20px 0;
    padding: 0;
    }

    #content p
    {
    font-size: 12px;
    }

    #content div.post p, #content div.post li
    {
    font-family: Lucida Grande, Verdana, sans-serif;
    font-size: 12px;
    line-height: 130%;
    }

    #content div.post div.storycontent p
    {
    width: 90%;
    }

    #content div.post div.storycontent ul, #content div.post div.storycontent ol
    {
    margin-left: 0;
    padding-left: 0;
    }

    #content div.post div.storycontent li
    {
    margin-left: 30px;
    width: 80%;
    }

    #content div.post div.storycontent blockquote
    {
    background: #CCFFFF;
    border: 1px solid #CCFFFF;
    border-left: 2px solid #CCFFFF;
    font-family: Georgia, Times New Roman, serif;
    font-size: 11px;
    margin-left: 20px;
    padding: 4px 4px 4px 7px;
    width: 80%;
    }

    #content h3
    {
    margin: 0 0 5px 0;
    padding: 0;
    }

    #content h3.storytitle, #content h3.storytitle a
    {
    font-size: 17px;
    color: #0066FF;
    margin:5px 0px 10px 0px;
    text-decoration: none
    }

    #content h3.storytitle a:hover
    {
    color: #495865;
    text-decoration: none
    }

    #content div.post p
    {
    width: 90%;
    }

    #content div.post div.meta, #content div.post div.meta a
    {
    color: #000000;
    font-family: Lucida Grande, Verdana, sans-serif;
    font-size: 10px;
    margin:0px 0px 25px 0px;

    }

    #content div.post div.meta li a:hover
    {
    color: #686050;
    }

    #content div.post div.meta ul, #content div.post div.meta li
    {
    display: inline;
    margin: 0;
    padding: 0;
    }

    #content div.post div.feedback
    {
    font-size: 12px;
    }

    #content #commentlist
    {
    margin: 20px 20px 20px 23px;
    padding: 0;
    }

    #content #commentlist li

    {
    margin-bottom: 10px;
    }

    #content #commentform input, #content #commentform textarea
    {
    background: #FFFFFF;
    border: 1px solid #87B1EA;
    font-size: 11px;
    padding: 2px;
    }

    #content #commentform textarea
    {
    height: 150px;
    width: 90%;
    }

    #content code
    {
    color: #87B1EA
    }

    #content ul
    {
    display: inline;
    margin: 0;
    padding: 0;
    list-style-type: circle;
    }

    #navcontainer ul
    {
    padding: 0;
    margin: 0;
    background: #99CCFF;
    border-top: 1px solid #DFDFDF;
    border-bottom: 1px solid #DFDFDF;
    float: left;
    width: 729px;
    font: 16px arial, helvetica, sans-serif;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li.page_item a
    {
    padding: 10px 14px 11px 14px;
    background: #99CCFF;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    float: left;
    border-right: 1px solid #FFFFFF;
    }

    #navcontainer ul li.page_item a:hover
    {
    color: #FFFFFF;
    background: #C9C0B0;
    }

    #navcontainer ul li.current_page_item a
    {
    padding: 10px 14px 11px 14px;
    background: #C9C0B0;
    color: #FFFFFF;
    text-decoration: none;
    float: left;
    border-right: 1px solid #DFDFDF;
    }

    #navcontainer ul li.current_page_item a:hover
    {
    background: #6F6F6F;
    }

    #menu
    {
    clear: right;
    float: left;
    position: relative;
    top: 10px;
    left: 50px;
    margin: 0 0 10px 0;
    width: 220px;
    }

    #menu ul
    {
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
    }

    #menu ul li
    {
    color: #5F5F5F;
    font-size: 12px;
    margin: 0;
    padding: 0;
    }

    #menu ul li p
    {
    font-size: 12px;
    width: 190px;
    font-weight: bold;
    }

    #menu ul li h2
    {
    border-bottom: 1px solid;
    width: 190px;
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    }

    #menu ul li ul
    {
    margin: 5px 0 15px 10px;
    }

    #menu ul li ul li
    {
    font-weight: normal;
    margin: 0 0 3px 0;
    padding: 0;
    line-height: 12px
    }

    #menu ul li#winamp ul li
    {
    width: 190px
    }

    #menu ul li ul li a
    {
    color: #5F5F5F;
    text-decoration: none;
    }

    #menu ul li ul li a:hover
    {
    font-weight: bold;
    text-decoration: none
    }

    #searchform
    {
    margin: 2px 0 15px 0;
    }

    #searchform input
    {
    background: #FFFFFF;
    border: 1px solid #6F6F6F;
    font-size: 11px;
    margin-top: 3px;
    padding: 2px;
    }

    p.credit
    {
    color: #000000;
    background: #99CCFF;
    border-top: 1px solid #DFDFDF;
    clear: both;
    font-size: 12px;
    margin: 0 auto 0 auto;
    padding: 16px 0 17px 0;
    text-align: center;
    width: 729px;
    }

    p.credit a
    {
    color: #000000
    }'

  • Joshua Sigar
    Member
    Posted 9 years ago #

    Suggestion: Can you edit your post and paste the numerous lines of code to http://pastebin.com. Thank you.

  • Monika
    Member
    Posted 9 years ago #

    Hi
    navcontainer
    needs
    margin-top:whatever you want px;

    and I'll found font-face in your sourcecode
    delete this and write your favorite font-face to the
    "body" in your css

    and I'll find target_blank in your sourcecode,
    [ I'm losing my temper about this because it is a paternalism. ]
    please break with this bad habit your user would be glad of this.

    the name of your website is *adult* with target blank you say to your user: "I know what the best is for you " ;)

  • JMP
    Member
    Posted 9 years ago #

    I think I figured out the br thing. The code is not <br<space>/>. It should be <br<space>. You can just add a bunch of these in tandem in your template code to create blank spaces.

  • JMP
    Member
    Posted 9 years ago #

    On second glance, the <br<space> command seems to work in Firefox, but not Internet Explorer. Any ideas?

  • vkaryl
    Member
    Posted 9 years ago #

    <br /> (with the space and self-closed) is the XHTML compliant version of <br> (without a space and not self-closed), which is used in "ordinary" html.

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags