I'm trying to build a Wordpress theme, using media queries for responsive layout. I have some issues around getting the correct layout whilst maintaining some semantic mark up.
Basically, for the post date in pages less than, say, 764 pixels wide, I want to have the date, bullet, and post category displaying inline; if the page is above this size, then the post date should display as a column (entry-date), alongside the main post column (main-column).
I think I've managed to get there, but just wondered if this html code was valid, as I've tried to keep header and footer sections within the post to make it make sense semantically.
Does anyone have any feedback?
Thanks,
John
<article class="post">
<div class="entry-date">
<span><span>30<sup>th</sup></span> Sep 2013</span>
</div>
<div class="main-column">
<span class="bullet">●</span>
<header class="entry-header">
<span class="entry-category"><a href="#">Cars</span>
<h1 class="entry-title">A new car from Ferrari</h1>
<span class="entry-authors vcard">by John Smith </span>
<div class="featured-img"><img src="img/ferrari.jpg" class="" alt=""></div>
</header><!-- .entry-header -->
<div class="entry-content">
<p>Ferrari have released a great new car, which is very fast.</p>
<span class="continue-reading">Continue reading</span>
</div><!-- .entry-content -->
<footer class="entry-meta">
<span class="entry-tags"><a href='#'>Sports cars</a></span>
</footer><!-- .entry-meta -->
</div>
</article><!-- #post-1234 -->
The comment's are completely off, validation has nothing to do with semantics, that's a totaly different subject. Semantic is about giving meaning to your code.
Currently you have this
<div class="entry-date">
<span><span>30<sup>th</sup></span> Sep 2013</span>
</div>
This would be more semantic, avoid using unnecessary tags(don't add tags only for styling, look for css solutions).
<div class="entry-date">
30<sup>th</sup>Sep 2013
</div>
Related
I cannot figure out what I am missing here. (Head included for bootstrap reference.)
<head>:
<!-- Bootstrap Complete CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></script>
<!-- Bootstrap Complete JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap Complete JavaScript Bundle -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
Problematic code:
<!-- TopGrid -->
<section id="TopGrid">
<div class="row">
<div class="TopGrid-Box col-lg-4">
<img class="Mask" src="Images\Mask Icon.png" alt="Lineart Face Mask">
<h2>Masks</h2>
<p>Our associates will be wearing masks, and you will be asked to do the same while shopping in our stores. </p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Hands" src="Images\Hand Cleaning Icon.png" alt="Lineart Hand Sanitizer">
<h2> Hands</h2>
<p>Hand sanitizer will be provided as you enter so we can maintain safer shoe displays. Our asociates will also be regularly using sanitizer as well as washing their hands
throughout the day.</p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Surface" src="Images\Surface Cleaning Icon.png" alt="Lineart Cleaning Spray">
<h2> Surfaces</h2>
<p>Our associates will be disinfecting all high-touch surfaces throughout the day, as well as before and after customers.</p>
</div>
</div>
</section>
I am not getting columns at all. Removing the images doesn't affect it, adding a container doesn't affect it, adjusting screen size does not affect it. I'm sure I'm missing something simple, but I don't know what it is.
(There is no CSS currently written for this code, except for the inline bootstrap.)
First, I am new to WordPress, second I have read all of the posts, blogs, etc. related to this issue and so far nothing makes sense.
I have a simple three page site. All three pages use this basic code at the top of the page to display a banner type image:
<div class="banner-section" style="background-image: url('/wp-content/themes/company/images/home-banner.jpg');">
<div class="banner-content align-centered" style="padding-top: 12.05%;">
<div class="row">
<div class="medium-6 small-6 columns"><img src="/wp-content/themes/company/images/home-banner-k-logo.png" /></div>
<div class="medium-6 small-6 columns"><img src="/wp-content/uploads/2018/10/company-new-combined.png" /></div>
</div>
</div>
<img class="main-img" src="/wp-content/themes/company/images/home-banner.jpg" />
</div>
Two of the pages work just fine. ONLY ONE of the pages, the contact form page, WordPress is wrapping the image in a paragraph tag. Why only this page? I could hack it by wrapping it myself and set some CSS to remove the margins. But why? Why would WordPress be inconsistent here?
WordPress automatically inserts <p> and </p> tags which separate content breaks.
To disable the wpautop filter, you can use:
remove_filter('the_content', 'wpautop');
It is might be because you are using contact form plugin or something , anyway you can add your own style but please do it on the child theme.
I have a simple question: I am currently creating my portfolio in html
I wish that by clicking on the image, I can write the description of my choice. For the moment it shows me this:
I give you the party of the corresponding code below.
Thank you again for your help !
<!-- item -->
<div class="project-item">
<!-- ==> Put your thumbnail as a background -->
<a href="img/portfolio/p2.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p2.jpg');">
<!-- project-description -->
<div class="project-description-wrapper">
<div class="project-description">
<!-- project name -->
<h2 class="project-title">Project Title</h2>
<!-- /project name -->
<span class="see-more">Project Tags</span>
</div>
</div>
<!-- /project-description -->
</a>
</div>
<!-- /item -->
I don't know what framework (if at all) you're using, but my go-to solution for creating websites, is MaterializeCSS.
And oh look, they got something that exactly matches what you want (as far as I can understand, let me know if it doesn't).
Here it is:
<!-- MATERIAL BOXED-->
<h1>MATERIAL BOXED</h1>
<img src="http://materializecss.com/images/sample-1.jpg" alt="" class="materialboxed" data-caption="Here is an image caption">
The only change that you must do in your code, is to import the Materialize library and jQuery necessary, all of which are in their official page.
Hope this can help you solve your problem, it might look a bit un-orthodox but it gets the job done, at looks pretty nice doing so ;)
I am pretty new in WordPress and totally new in BootStrap development (I have beginning to study BootStrap yesterday) and I have the following doubt about how create a custom WP template that use BootStrap from 0.
For example I have the source of this page made using BootStrap: http://www.html.it/guide/img/bootstrap/demo/home.html
and I want try to create a WP template starting by it.
Some time ago I have realized a standard HTML\CSS template for WP, can I use the same tecnique dividing the previous page into (header, footer, content, etcetc) and the put in these section the WP php code to show articles and other WP functions?
Is it the right way?
The other doubts is related to the upper slideshow, in this slideshow the immage are fixed and definied in a static way:
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-2.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-3.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
And what can I do if I want that the administrator can choose the immages that should be displayed from the backend (I think in the theme configuration panel)
Can you give me some ideas about how do these things?
Tnx
Andrea
I'm not 100% sure this will cover all your questions, but using Bootstrap with WP is the same as creating a regular theme with WP, you just include the additional bootstrap files and then use the relevant classes in your markup. Apparently there's also a plugin you can use: http://wordpress.org/plugins/wordpress-bootstrap-css/
The biggest difference is how to you will handle the menu-I usually use this walker to generate the it, and then I can use the default Bootstrap menu styles: https://github.com/twittem/wp-bootstrap-navwalker.
As for the carousel, try this: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/
I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.