creating a blank line on template page without distortion

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 ?

Hi Podz,

it’s https://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

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

Any help ?

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>/>

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.

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” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; ‘

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” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; ‘

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

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.

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’

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

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

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

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
https://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
??

Nope, that is my blog.

hi Monika, it’s https://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: https://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
}’

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