Design custom template

  • Resolved worels

    (@worels)


    6 years, 10 months ago

    Hi
    Another “newbie” Question, but I didn’t find any answer around the internet and the codex as well.

    I created a custom template (wspage.php “Worshopseite”). To start with it, I copied the code of the page.php to my template under the template Name-comment.
    Everythings fine. It appears in my backend, and I can assign it to my pages …
    but …
    I can’t figure out, how to “design” this newly created “page”, because nearly everything concerning layout is in the style.css. And I cannot see, how to change design/layout ONLY for the pages with the wspage-template.

    i.e: the code for the content and sidebars concerning pages is:

    body {
	margin: 0;
        width: 100%;
}

.site-header {
        border-top: none;
	border-bottom: none;
	/*background-image: url(https://lustvollleben.at/wp-content/uploads/2018/01/Background_Vieux-Moulin.jpg);*/
        background-color: rgb(0, 22, 0, 0.5);
        background-repeat: no-repeat;
        background-size: cover;
        }
        
   

.main-navigation-wrap {
	border-top: none;
	background: transparent;
	color: #fff;
}

.container {
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
	width: 100%;
}

.site-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
        width: 100%
}
.content-area {
	order: 2;
	box-sizing: border-box;
	padding: 2em 2em 0;
	width: 68%;
        margin: 1%;
	border-right: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	background-color: rgb(234, 207, 159, 0.8);
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
}

.main-sidebar {
	order: 1;
	padding: 0.5em;
	width: 15%;
	border-left: 1px solid #e5e5e5;
	background-color: rgb(221, 184, 110, 0.9);
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
}

.small-sidebar {
	order: 3;
	padding: 0.5em;
	width: 15%;
	background-color: rgb(136, 129, 138, 0.8);
	-webkit-box-ordinal-group: 4;
	-ms-flex-order: 3;
}

    If I just want to change, the width of content area and its margin:

    
.content-area {
	order: 2;
	box-sizing: border-box;
	padding: 2em 2em 0;
	width: 70%;
        border-right: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	background-color: rgb(234, 207, 159, 0.8);
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
}

    .. and I want this ONLY to affect the pages with the wspage-template.

    How do I do this ?

    Tnx in advance ??
    Worels

    • This topic was modified 6 years, 10 months ago by worels.
    • This topic was modified 6 years, 10 months ago by worels.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • 1. Add a unique body class to the body HTML element of your custom template. Ex.:

    
<body class="new_css_class the_rest_of the body_classes_being output" >

    2. Then, use the CSS Ex.:

    
body.new_css_class .content-area {
/* Your new custom CSS */
}

    This CSS makes it work only on pages with this body class and does not affect the other pages without the class.

    There are other techniques, review “WordPress Body Class”.

    Thread Starter worels

    (@worels)

    Tnx a lot …

    My “workaround” meanwhile was:
    in the template file, directly under the template name I put the code:
    <link rel='stylesheet' id='wspage-css' href='https://lustvollleben.at/wp-content/themes/lustvollleben-admiral-child/wspage.css' type='text/css' media='all' />
    then I created a wspage.css file and in this css-file made the css changes using !important

    .content-area {
	order: 2;
	box-sizing: border-box;
	padding: 2em 2em 0;
	width: 70% !important;
        margin: 0 !important;
	border-right: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	background-color: rgb(234, 207, 159, 0.8);
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;

    It seemed to work, but dunno what effects this will have (responsiveness etc.).
    I assume, my “workaround” is a dirty one ??
    Greetz and
    Brgds
    Worels

    Thread Starter worels

    (@worels)

    @swansonphotos (Pioneer Web Design)

    Just to make sure, that I did get it right:

    (Until, there is no html body-tag in the template file)

    “1. Add a unique body class to the body HTML element of your custom template.”

    … means, that I put the body class after the “get header” ?
    …. and can I use a custom “name” for it ?
    Like so :

    <?php /* Template Name: Workshopseite */ ?>
<?php get_header(); ?>
<body class="wspage_css_class">
	<section id="primary" class="content-single content-area">
		<main id="main" class="site-main" role="main">

			<?php while ( have_posts() ) : the_post();

				admiral_breadcrumbs();

				get_template_part( 'template-parts/content', 'page' );

				comments_template();

			endwhile; ?>

		</main><!-- #main -->
	</section><!-- #primary -->

	<?php get_sidebar(); ?>

<?php get_footer(); ?>

    … hope the name class=”wspage_css_class” is a correct one … and NO closing body tag, as it will be in the footer ??

    …. THEN creating a file i.e. wspage.css, which filename is nowhere included, and is recognized from WP, just by the body class, written inside it like so:

    
body.wspage_css_class .content-area {
/* new custom CSS */
}

    …. or did I get anything wrong ?

    Tnx a lot in advance ….

    • This reply was modified 6 years, 10 months ago by worels.
    • This reply was modified 6 years, 10 months ago by worels.

    We do not add a new HTML element for body, we modify the theme’s HTML element.

    You need to find in your theme where the body tag is being output and provide us the full code to begin to help. See:

    https://codex.www.ads-software.com/Theme_Development

    https://developer.www.ads-software.com/themes/basics/template-hierarchy/

    https://www.w3schools.com/html/

    https://www.w3schools.com/css/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Design custom template’ is closed to new replies.