Support » Themes and Templates » Page template – Why i cannot see ol and ul?

  • Resolved Lorexo

    (@lorexo)


    Hi all!

    I’m trying to create a full-width (with no sidebar) page template.

    I created page-nosidebar.php and named as a new page template. And it works. But in the pages with this template i cannot see in the right way the lists. More in particular: i cannot see the numbers of the ol or the circles of the ul.

    I hope i represent clearly my problem :\

    p.s.: the theme is Adaptive Flat

    I paste here the codes:

    page.php

    <?php get_header(); ?>
    
    	<div class="center">
    
    		<div id="content">
    
    			<?php
    				if ( have_posts() ) {
    					while ( have_posts() ) {
    						the_post();?> 
    
    						<article id="single-page">
    
    									<div id="title-container"> <h1><?php the_title() ?></h1> </div>
    				  		 <?php the_content()?>
    						</article>
    						<?php wp_link_pages(); ?>
    			<?php	} // end while
    
    				} // end if
    			?>
    		</div>
    		<?php get_sidebar();  ?>
    	</div>
    
    <?php get_footer();

    The page-nosidebar.php code:

    <?php /* Template Name: nosidebar */ ?>
    <?php get_header(); ?>
    
    	<div class="center">
    
    		<div id="content-nosidebar">
    
    			<?php
    				if ( have_posts() ) {
    					while ( have_posts() ) {
    						the_post();?> 
    
    						<article id="single-page">
    
    									<div id="title-container"> <h1><?php the_title() ?></h1> </div>
    
    									  		<?php the_content()?>								  
    
    						</article>
    
    						<?php wp_link_pages(); ?>
    
    			<?php	} // end while
    
    				} // end if
    			?>
    
    		</div>
    
    	</div>
    
    <?php get_footer(); 
    
    ?>

    And the style.css:

    /*
    Theme Name: Adaptive Flat
    Theme URI: http://www.mickdegraaf.nl/adaptiveflat
    Author URI: http://www.mickdegraaf.nl/
    Description: Create a professional and personal WordPress website. Adaptive Flat allows you to style your site with over 50 styling options making your site both beautiful and seo optimized. Use it for a small business website or your personal blog the possibilities are endless. Theme also has support for an arcade plugin wich is under development and not ready for public release yet.
    Version: 1.1.3
    Author: Mick de Graaf
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-menu, one-column, theme-options
    */
    
    * {
    	padding: 0;
    	margin: 0;
    }
    
    body {
    	font-family: 'Open Sans', sans-serif;
    }
    
    article a{
    	transition: color 0.5s;
    }
    
    article img{
    	max-width: 100%;
    	height: auto;
    }
    
    a {
    	color: inherit;
    	text-decoration: none;
    }
    
    #top-bar {
    	width: 100%;
    	height: 20px;
    }
    
    #main-content {
    	min-height: 500px;
    }
    
    /**
    * #.# Header
    *
    * CSS for the header some gets overwritten in media querys at the end of the file
    */
    
    #header {
    	margin: 0px auto;
    	overflow: auto;
    }
    
    #header-left {
    	display: inline-block;
    	height: 100px;
    }
    
    #header-left img{
    	max-width: 95%;
    }
    
    #header .site-title {
    	font-size: 30px;
    	font-weight: bold;
    }
    
    #header p {
    	font-size: 15px;
    	font-weight: normal;
    }
    
    #menu-wrapper {
    	width: 100%;
    }
    
    .menu-bar {
    	width: 100%;
    }
    
    .scrolling-menu {
    	position: fixed;
    	z-index: 10;
    	top:0;
    }
    
    /**
    *#.# header menu
    *
    *	styles the dropdown menu
    */
    
    .header-menu	{
    	margin: 0px auto !important;
    }
    
    .header-menu ul{
    	list-style: none;
    
    }
    
    .header-menu li a {
    	line-height: 50px;
    	height: 50px;
    	display: block;
    	padding: 0 10px;
    }
    .header-menu li {
    	display: block;
    	float: left;
    	height: 50px;
    }
    
    .header-menu ul ul {
    	height: auto;
    	position: absolute;
    	margin-left: 10px;
    	display: none;
    	width: 200px;
    	z-index: 100;
    }
    
    .header-menu ul ul li {
    	width: 200px;
    	height: auto;
    	display: block;
    	float: none;
    }
    
    .header-menu ul ul li a{
    	line-height: 30px;
    	height: auto;
    	width : 100%;
    	text-overflow:ellipsis;
    }
    
    .header-menu ul li:hover > ul {
    	display: block
    } 
    
    /**
    * #.# searchform
    *
    * CSS searchform
    */
    
    .searchform {
    	float: right;
    	height: 30px;
    	position: relative;
    	margin: 10px 0px;
    	border-radius: 10px;
    	border: 1px solid;
    }
    
    .searchform .s {
    	border: none;
    	float: left;
    	padding-left: 10px;
    	width: 100px;
    	height: 100%;
    	transition: width 1s ease;
    	border-radius: 10px 0px 0px 10px;
    }
    
    .searchform .s:focus,
    .searchform .searchsubmit:focus {
    	outline: none;
    }
    
    .searchform .s:focus{
    	width: 170px;
    }
    
    .searchform .searchsubmit {
    	width: 30px;
    	height: 100%;
    	border: 0;
    	border-radius: 0px 10px 10px 0px;
    	cursor: pointer;
    	font: normal 18px/1 'dashicons';
    	-webkit-appearance: none;
    	float: right;
    }
    
    .searchform .searchsubmit:hover {
    	font: normal 20px/1 'dashicons';
    }
    
    .dashicons-admin-home:before {
    	content: "\f102";
    	font: normal 30px/1 'dashicons';
    	line-height: 50px;
    	height: 50px;
    
    	display: block;
    }
    
     #sidebar .searchform .searchsubmit {
    	border-radius: 0px;
    }
    
     #sidebar .searchform .s {
    	float: left;
    	border-radius: 0px;
    	width: 80%;
    }
    
     #sidebar .searchform {
    	float: left;
    	display: block;
    	float: none;
    	width: 90%;
    	clear: both;
    	border-radius: 0px;
    }
    
    /*
    * #.# Headings
    *
    *All headings rough styling (mainly font size) takes place here
    */
    
    h1 {
    	font-size: 30px;
    }
    
    h2 {
    	font-size: 26px;
    	color: #f37934;
    }
    
    h3 {
    	font-size: 21px;
    	color: #f37934;
    }
    
    h4 {
    	font-size: 18px;
    	color: #f37934;
    }
    
    h5 {
    	font-size: 17px;
    	color: #f37934;
    }
    
    h6 {
    	font-size: 16px;
    	color: #f37934;
    }
    
    /**
    * #.# Page title and description
    *
    * Page title and description styling is done here
    */
    
    #title-container {
    	border-bottom: 2px solid;
    	margin-bottom: 10px;
    }
    
    #content > #title-container {
    	width: 95%;
    }
    
    #title-container h1 {
    	display: inline-block;
    	font-size: 30px;
    }
    
    #description {
    	width: 95%;
    }
    
    /**
    * #.# Random css
    *
    * Some css that not have been grouped yet
    */
    
    iframe,
    embed,
    object {
    	margin: 0px auto;
    	display: block;
    	max-width: 100%;
    }
    
    hr {
    	border: 0px;
    	height: 1px;
    	background: #EEEEEE;
    }
    
    p {
    	margin: 10px 0px;
    }
    
    blockquote {
      background: #f9f9f9;
      border-left: 10px solid #ccc;
      margin: 1.5em 10px;
      padding: 0.5em 10px;
      quotes: "\201C""\201D""\2018""\2019";
    }
    blockquote:before {
      color: #ccc;
      content: open-quote;
      font-size: 4em;
      line-height: 0.1em;
      margin-right: 0.25em;
      vertical-align: -0.4em;
    }
    blockquote p {
      display: inline;
    }
    
    /**
    * #.# Post preview
    *
    * Styles the post previews on archive pages
    */
    .post-prev {
    	border-bottom: 1px solid;
    	padding: 10px 0px;
    	word-wrap: break-word;
    }
    
    .prev-title a{
    	transition: color 0.5s;
    	font-weight: 600;
    	font-size: 20px;
    }
    
    .post-prev p {
    	word-wrap:break-word;
    }
    
    .post-prev img,
    .img-placeholder {
    	width: 100%;
    	height: auto;
    	display: block;
    }
    
    .img-placeholder .icon {
    	margin: 0px auto;
    	text-align: center;
    	width: 100%;
    	float: left;
    }
    
    .img-placeholder .icon:before {
    	content: "\f155";
    	font: normal 150px/1 'dashicons';
    	transition: color 0.5s;
    }
    
    /**
    * #.# Post preview one per line
    *
    * Post preview one per line
    */
    
    .post-prev2{
    	width: 90%;
    	height: auto;
    	border-bottom: 1px solid;
    	padding: 10px 0px;
    }
    
    .post-prev2 img,
    .post-prev2 .img-placeholder {
    	width: 200px;
    	height: auto;
    	float:left;
    	margin:0px 10px 0px 0px;
    }
    
    .post-prev2 p{
    	display: inline;
    }
    
    .post-prev2 .img-placeholder .icon:before {
    	font: normal 100px/1 'dashicons';
    }
    
    .post-prev2 .prev-title {
    	margin: 10px 0px;
    }
    
    /**
    * #.# WordPress styles
    *
    * Styles required by wordpress
    */
    
    .wp-caption {
    	max-width: 100% !important;
    }
    
    .wp-caption img{
    	max-width: 100%;
    }
    
    .wp-caption-text {
    	margin: 0px;
    	text-align: center;
    }
    
    .sticky {
    	/* Nothing here */
    }
    
    .gallery-caption {
    	/* Nothing here */
    }
    
    .bypostauthor {
    	/* Nothing here */
    }
    .alignright {
    	float: right;
    	margin: 10px 0px 10px 10px
    }
    .alignleft {
    	float: left;
    	margin: 10px 10px 10px 0px
    }
    .aligncenter {
    	margin: 10px auto;
    }
    
    /**
    * #.# Footer styles
    *
    * Styles required by wordpress
    */
    
    #footer-top {
    	margin-top: 10%;
    	min-height: 100px;
    	height: auto;
    	width: 100%;
    }
    
    #footer-top .widget {
    	width: 22%;
    	margin: 30px 4% 30px 0px;
    	float: left;
    }
    
    #footer-top .widget:last-child {
    	margin: 30px 0px 30px 0px;
    }
    
    #footer-top .widget-head {
    	margin-bottom: 5px;
    }
    
    #footer-top .center {
    	margin: 0px auto;
    	width: auto;
    	max-width: 1120px;
    }
    
    #footer-bottom {
    	min-height: 20px;
    	width: 100%;
    }
    
    #footer-bottom .center
    {
    	margin: 0px auto;
    	padding: 10px 0px;
    }
    
    #game {
    	width: 100%;
    	height: 100%;
    }
    
    #single-game, #single-page {
    	width: 95%;
    	margin-bottom: 10px;
    	padding-bottom: 10px;
    	border-bottom: 1px solid;
    }
    
    /*
    * #.# Sidebar and footer widgets
    *
    * Style for the sidebar and footer widgets including lists
    */ 
    
    .widget-head {
    	border-bottom: 2px solid;
    	margin-bottom: 10px;
    }
    
    .widget-head h4 {
    	display:inline-block;
    	padding: 5px 10px;
    	width: auto;
    }
    .widget ul {
    	list-style: none;
    }
    
    #sidebar li:before	{
    	content:" • ";
    	margin: 0px 10px;
    }
    
    .widget li {
    	padding: 5px 0px;
    	border-bottom: 1px solid;
    	font-size: 13px;
    }
    
    .widget ul li:last-child {
    	border-bottom: none;
    }
    
    .widget ul.children {
    	margin-left: 15px;
    }
    
    .widget a:hover {
    	text-decoration: underline;
    }
    
    #sidebar div:first-child {
    	padding-top: 5px;
    }
    
    /*
    * #.# Pagination css
    *
    * Awesome styling for pagination
    */
    .navigation{
    	float:left;
    }
    
    .navigation ul {
    	list-style: none;
    	margin: 10px 0px;
    }
    
    .navigation ul li {
    	display: inline-block;
    	margin: 2px 0px;
    	transition: all 0.5s;
    	font-size: 30px;
    }
    
    .navigation ul li a {
    	padding: 0px 15px;
    }
    
    .clearfix:after {
        visibility: hidden; display: block; font-size: 0;
        content: " "; clear: both; height: 0;
    }
    
    .tag-icon, .category-icon {
    	display: inline;
    	font-size: 17px;
    	font: normal 17px/1 'dashicons';
    }
    
    .category-icon:before {
    	content: "\f318";
    	margin: 0px 10px;
    	line-height: 17px;
    }
    
    .tag-icon:before {
    	content: "\f323";
    	margin-right: 10px;
    	line-height: 17px;
    }
    
    /*
    *#.# lists, forms, tables, legend etc css
    *
    */
    
    /* Tables css */
    
    #content th,
    #content td{
    	padding: 5px 10px 5px 0px;
    }
    
    /* Lists css */
    #content ul,
    #content ol{
    	list-style-position:inside;
    	padding-left: 15px;
    	margin-left: 0px;
    }
    
    #content-nosidebar ul,
    #content-nosidebar ol{
    	list-style-position:inside;
    	padding-left: 15px;
    	margin-left: 0px;
    }
    
    /* form css */
    #content fieldset {
    	padding: 20px;
    	margin: 10px;
    }
    
    #content legend {
    	padding: 10px;
    	border: 2px solid;
    }
    /* comments css */
    
    #comments {
    	height: auto;
    }
    
    #comments li {
    	list-style: none;
    }
    
    .avatar {
    	margin: 10px;
    }
    
    #comments ul {
    	width: 95%;
    	float: right;
    	display: block;
    }
    
    #comments .comment {
    	border-bottom: 1px solid;
    	margin: 10px 0;
    }
    
    #content {
    	overflow: hidden;
    }
    
    @media only screen and (max-width: 767px) {
        /* phones */
    
        .center {
    		width: 95%;
    		margin: 0px auto;
    	}
    
    	#content {
    		margin: 10px 0px;;
    		width: 100%;
    	}
    
        #sidebar {
    		width: 100%;
    	    margin: 30px 0px; /* used for triggering in js/script.js */
    	    max-width: none;
    	}
    
    	#sidebar li {
    		font-size: 20px;
    	}
    	.post-prev {
    		height: auto;
    	}
    
    	#header-left img
    	{
    		margin: 0px auto;
    	}
    
    	#footer-top .widget{
    		width: 100%;
    		float: none;
    	}
    
    	#footer-top .widget:last-child{
    		margin: 0px;
    		padding-bottom: 10px;
    	}
    
    	#footer-top .widget:first-child{
    		padding-top: 20px;
    	}
    
    }
    
    @media only screen and (min-width: 768px) {
        .center {
    		width: 95%;
    		max-width: 1120px;
    		margin: 0px auto;
    		overflow: auto;
    	}
    
    	#content {
    		width: 70%;
    		float: left;
    	}
    
    	.full-width #content{
    		width: 100%
    	}
    
        #content-nosidebar {
    		width: 70%;
    		float: left;
    	}
    
        #sidebar {
    		width: 30%;
    		float:right;
    	}
    
    	.left-sidebar #sidebar {
    		float: left;
    	}
    
    	.left-sidebar #content {
    		float: right;
    	}
    
    	.left-sidebar .post-prev {
    		float: right;
    		margin-left: 5%;
    		margin-right: 0px;
    	}
    
    	.left-sidebar .post-prev2 {
    		float: right;
    	}
    
    	.left-sidebar #single-page,
    	.left-sidebar #single-game {
    		float: right;
    	}
    
    	.post-prev {
    		width: 45%;
    		margin-right: 5%;
    		min-height: 475px;
    		float: left;
    
    	}
    
    }

Viewing 9 replies - 1 through 9 (of 9 total)
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Page template – Why i cannot see ol and ul?’ is closed to new replies.