Using a mobile theme optimized from AMP, I need to add custom CSS to a theme to display a custom banner in a different position. For the purposes of this post, the banner is already in place using:
<div class="td-a-rec td-a-rec-id-header_mob "><div class="td-all-devices">
What I would like to do is place this below the elements with class:
<div class="td_module_mob_2 td_module_wrap td-animation-stack ">
But above the elements with class:
<div class="td-container td-pb-article-list td-main-content" role="main">
The ad needs rendering above the 'LATEST ARTICLES' block title, WITHOUT the ad being displayed in its current position. For a clearer picture of the amp version and CSS modification required see here TBM.
I've tried a few custom CSS snippets using freecodecamp.org/news/css-pseudo-elements-before-and-after-selectors-explained/, but it doesn't appear to be working, since the ad is rendered dynamically using current entries in the theme panel will this be possible, as per the link above the following is currently being rendered:
<div class="td-a-rec td-a-rec-id-header_mob ">
<div class="td-all-devices">
<a href="https://inplayguru.com?r=31289" target="_blank">
<amp-anim src="https://thebetmatrix.win/wp-content/uploads/2022/12/InPlayGuru-Design1-LM-320x100-1.gif" width="320" height="100" alt="InPlay Guru - Inplay Football Stats Scanner" class="amp-wp-enforced-sizes amp-wp-31d994b i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" layout="intrinsic" data-amp-original-style="border:15px" i-amphtml-layout="intrinsic">
<i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer">
<img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
</i-amphtml-sizer><noscript>
<img src="https://thebetmatrix.win/wp-content/uploads/2022/12/InPlayGuru-Design1-LM-320x100-1.gif.pagespeed.ce.WeGzAscmrw.gif" width="320" height="100" alt="InPlay Guru - Inplay Football Stats Scanner">
</noscript>
</amp-anim>
</a>
</div>
</div>
Thanks
Pseudo elements selectors, requiring as detailed in the post, but expected template output isn't as desired and requires some additional CSS input to render the ad in the position detailed above.
Related
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 problem in my wordpress logo, when check in bing webmaster diagnostic tool, tell me i have multiple h1 tags, anyone know how to fix?
my site is https://xn--hxanfhlafbfwvgsh0akf7l.com and my wordpresss theme is colormag free version,
code is
<h1 class="logo">
<a href="https://xn--hxanfhlafbfwvgsh0akf7l.com/" title="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα" rel="home">
<img src="https://xn--hxanfhlafbfwvgsh0akf7l.com/wp-content/uploads/2016/12/Ηλεκτρονικό-τσιγάρο-νέα-κριτικές-συμβουλές-στο-άτμισμα-.png" alt="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα">
</a>
</h1>
Looks like it is in your template twice
<div
id="header-text" class="screen-reader-text"><h1 id="site-title">
</h1></div></div><div
id="header-right-section"><div
id="header-right-sidebar" class="clearfix">
<aside
id="text-2" class="widget widget_text clearfix"><div
class="textwidget"><h1 class="H1">
<img
src="http://www.xn--hxanfhlafbfwvgsh0akf7l.com/wp-content/uploads/2016/12/Ηλεκτρονικό-τσιγάρο-νέα-κριτικές-συμβουλές-στο-άτμισμα-.png" alt="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα"></h1></div>
So what you need to do, is locate where in your template it is putting it in twice, create a child theme, and remove one of those from the template
So you could do a search inside the them, for either site-title or class="H1" and you should then be able to find the template.
Hope that helps.
<div class="row">
<div ng-repeat="moive in movies" class="columns large-1">
<a href="#/movies/{{moive.imdbID}}">
<img ng-src="/data/images/{{moive.imdbID}}.jpg">
</a>
</div>
</div>
I am getting json data and viewing the image url as gallery.
Some how ng-repeat create random gap between these images in random column (the same as <br> effect). Its for every 20 images, it does skip a line automatically.
I don't have any custom css implemented except foundation.
What seems to be a problem?
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
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/