I have made new page template on the following page...
https://www.johnnycassell.com/how-to-get-a-girlfriend
I am getting the author box displayed. can anyone help with how to remove this from being displayed? We mainly want to remove it for security.
I think the code you want to remove lives in the either content.php or single.php or a custom-{slug}.php file you are using for the post. Login as admin to Wordpress, and goto Appearances->Editor. Now edit the file that is in use.
Find the .author-details css class. Just two divs above it is the ... Remove it and everything inside it to remove the author box.
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
<div class="author-details">
<div class="author-image">
<img alt="" src="https://secure.gravatar.com/avatar/03e29f93475b2934e049531cadd2d3ba?s=172&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/03e29f93475b2934e049531cadd2d3ba?s=344&d=mm&r=g 2x" class="avatar avatar-172 photo" height="172" width="172"></div>
<h5>Johnny Cassell</h5>
<ul class="social-icons">
</ul>
</div>
</div>
</div>
try this to add in style.css in your theme
.author-details {
display: none;
}
Related
So I'd like to target a specific label class, and proceeding text, turn it into a button and have it link to dialing screen on mobile.
At the moment I can't even figure out how to target the label.
Tried using
awpcp-subtitle:nth-child(2) {background-color: #d2e03a;
color: white; text-align: center; border-radius: 2px}
.awpcp-subtitle:nth-child(odd) {background-color:
#d2e03a; color: white; text-align: center; border-radius:
2px;}
which just targets 'more information' and 'contact details'. Using 'label' targets every single label on the site.
I have this html:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK
The label is 'phone' and proceeding text is the phone number, so I'd like to target this please. Turning it into button which links to dialing screen on mobile is a bonus, even if I can target just the label, that would be super.
What I'm trying to do is turn that 'phone' label, together with the text, into a button. I would like this button to link to dialing pad on a mobile phone device. It's a classifieds listing site so I want users to be able to press the button which links to the dialing pad so they can phone up and enquire without having to input the information manually. At the moment I just have a label and number which the user has to copy from the site and paste into dialling pad clipboard.
I would like some css to do all this, failing that some html or how to do it with html. Failing that, just way to to target the label 'phone' and the number after it so I can give them a background colour-one background color, so it looks like a button. Once I have that button look, I can start to figure out how to make it into a link and make it link to dialing pad on phone.
Even some html code which I can just insert into my header.php which does it all. Running WordPress.
More html
div id="main" class="container" role="main">
<div class="row">
<div id="primary" class="col-md-8 mb-xs-24 sidebar-
right">
<article id="post-1189" class="post-1189 page type-page
status-publish hentry">
<header class="entry-header">
<h1 class="entry-title"><span
class="hpt_headertitle">Awpcp Show Ad</span></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<div id="classiwrapper"><ul class="awpcp-classifieds-
menu awpcp-clearfix" data-breakpoints='{"tiny": [0,400],
"small": [400,500]}' data-breakpoints-class-prefix="awpcp-
classifieds-menu">
</ul>
<div id="showawpcpadpage">
<div class="awpcp-title"><a href="https://adsler.co.uk/wp-
user-test-dashboard-2/awpcp-show-ad/13/madame-
bovary/london/uk/books/">Madame Bovary</a></div>.
<br/>
<div class="showawpcpadpage">
<div class="awpcp-ad-primary-image"><a class="awpcp-
listing-primary-image-thickbox-link thickbox thumbnail"
href="https://adsler.co.uk/wp-
content/uploads/awpcp/images/61l8teochll-a0bee4d6-
large.jpg" rel="awpcp-gallery-13"><img
class="thumbshow" src="https://adsler.co.uk/wp-
content/uploads/awpcp/thumbs/61l8teochll-a0bee4d6-
primary.jpg" alt="Thumbnail for the listing's main image"
width="200" height="200"/></a><a class="thickbox
enlarge" href="https://adsler.co.uk/wp-
content/uploads/awpcp/images/61l8teochll-a0bee4d6-
large.jpg">Click to enlarge image.</a></div>
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576335122
<br/><label>Location:</label> London, UK
</div>
<div class="showawpcpadpage"><label>Price:</label>
<strong>£ 3.00</strong></div>
<div class="fixfloat"></div>
<div class="showawpcpadpage">
<div class="awpcp-subtitle">More Information</div>
This is Gustav Flaubert's most famous novel.
Cheap price.
</div>
<div class="fixfloat"></div>
<div id="displayimagethumbswrapper">
<div id="displayimagethumbs">
<ul>
</ul>
</div>
</div>
<span class="fixfloat"><div class="tw_button
awpcp_tweet_button_div"><a
href="http://twitter.com/share?
url=https%3A%2F%2Fadsler.co.uk%2Fwp-user-test-
dashboard-2%2Fawpcp-show-ad%2F13%2Fmadame-
bovary%2Flondon%2Fuk%2Fbooks%2F&text=
Madame+Bov.
ary" rel="nofollow" class="twitter-share-button"
target="_blank">Tweet This</a></div> <div
class="tw_button awpcp_tweet_button_div"><a
href="http://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fadsler.co.uk%2Fwp-user-test-
dashboard-2%2Fawpcp-show-ad%2F13%2Fmadame-
bovary%2Flondon%2Fuk%2Fbooks%2F" class="facebook-
share-button" title="Share on Facebook" target="_blank">.
</a></div> <a id="flag_ad_link" href="#" data-
ad="13">Flag Ad</a></span>
<a href="https://adsler.co.uk/wp-admin/admin.php?
page=awpcp-panel&action=edit&id=13"
title="Edit Madame Bovary">Edit Ad</a>
</div></div><!--close classiwrapper-->
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="edit-link"><a class="post-edit-link"
href="https://adsler.co.uk/wp-admin/post.php?
post=1189&action=edit">Edit <span class="screen-
reader-text">"<span class="hpt_headertitle">Awpcp Show
Ad</span>"</span></a></span> </footer><!-- .entry-
footer -->
</article><!-- #post-## -->
</div><!-- #primary -->
<aside id="secondary" class="widget-area col-md-4"
role="complementary">
<div id="text-3" class="widget widget_text">
<div class="textwidget"></div>
</div></aside><!-- #secondary -->
</div>
Adsler.co.uk is the site.
https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/13/madame-bovary/london/uk/books/ is an example of the page. Here you can see that 'email' link is clickable amd highlighted as button but 'phone and number isn't.
Any ideas?
Well you can't target plain text without an element container. If you can modify the HTML you should at the very least wrap the text in a span. However, even better would be to wrap each label/content block into a div with a class.
Since all you've shared is a small snippet, I have no way of knowing if this will work but in this example, you can get the "phone" with the nth-of-type selector.
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK
CSS
label:nth-of-type(1){
your styles
}
I did a thumbnail with some images . I'm using bootstrap.
Below each image I want to put a title .
The problem is when the title is large, it breaks to a second line , making the thumbnail become disorganized .
here the what issue
https://s17.postimg.org/v4116i54f/pic.png
anyone know how to fix this?
<div class="col-lg-3 col-sm-6 videoitem">
<div class="b-video">
<div class="v-img">
<img src="http://domain/cover/7604.jpg" class="img-rounded" width='270' height='169' alt="">
<div class="time">3:50</div>
</div>
<div class="v-desc">
<a href=".html" >title</a>
</div>
<div class="v-views">
27,548 views. <span class="v-percent"><span class="v-circle"></span> 78%</span>
</div>
</div>
</div>
You have two possibilities here:
Either force one-line titles with height, overflow and text-overflow
Or clear the floats after every 4 items using some kind of clearfix
If you are not much concerned about browser support you can also try Bootstrap 4 which implements grid using flexbox
You can add a min-height for the title or you can use to -webkit-line-clamp: 2;like this answer https://stackoverflow.com/a/13924997/7565713
I am trying to get rid of unwanted space in a WordPress page. Here is the link to the page: http://lectorbookclub.com/current-conversations/. I'm trying to use CSS to fix it because I only have access to editing the CSS and HTML.
I used Firebug to gather this code:
<div id="content" role="main">
<article id="post-12581" class="post-12581 post type-post status-publish format- standard hentry category-fall-2013 category-uncategorized tag-end-of-year-post clear-fix">
<div class="featured-image">
<a href="http://lectorbookclub.com/2014/05/01/eng-202b-summary-post/" title="Permalink to Eng 202B Summary Post" rel="bookmark">
<img src="http://s0.wp.com/wp-content/themes/pub/oxygen/images/archive-thumbnail-placeholder.gif?m=1335191815g" alt="" class="attachment-archive-thumbnail" scale="0"/>
</a>
</div>
<header class="entry-header">
<h1 class="entry-title">
<div class="entry-meta">
<span class="entry-date">
<span class="byline">
<span class="comments-link">
<span class="edit-link">
</div>
</header>
<div class="entry-summary clear-fix">
Read Article →
You have a few options depending on how you want to go about this.
My first suggestion is simple just based off of what you have shared. (that said this does not mean this is the only way, or the best way or the clean way)
You may want to adjust your CSS to move the individual entries a few pixels from the right by adding a right margin.
.entry-summary {
margin-right: 45px;
}
Or you may want to add a left margin to .entry-header
.entry-header {
margin-left: 15px;
}
There are various other options as well. Hope this helps.
(try to be more concise and direct in the future. ask your question with all needed details for others to understand so that you may receive an answer more quickly and that others may feel more motivated to help!)
In your CSS stylesheet:
#page {max-width: 960px; }
Substitute 960px for whatever size you want it to be.
Okay, I realized it had to do with the article tag (which wraps around the date and the entries). I played around with the width of the article tag in CSS and this seemed to be the answer. Thank you all so much for looking at this problem!
I would consider making the text in entry-header align right.
header.entry-header { text-align: right; }
I don't know how else header.entry-header is used in your theme, but on the page you provided, that would probably produce the alignment you are looking for.
I'd like to edit the link properties of a specific page so they direct elsewhere than what I specified in the social settings menu, which works globally. So, as it is now the links inherit their properties and theres no way in the cms to change this for every page. Is there a way to add it in the css? I'm not sure how to format it correctly. Here's the hmtl:
The page id: body.page-id-85
The HTML:
<div class="wrapper">
<div class="thb-social-home">
<a title="Facebook" href="https://www.facebook.com/">
<span class="thb-social-icon">2</span>
</a>
<a title="YouTube" href="http://www.youtube.com/">
<span class="thb-social-icon">5</span>
</a>
</div>
</div>
Thanks!!
You can use body.page-id-85 as base selector for this page:
#body.page-id-85 .wrapper {
/* wrapper specific rules*/
}
#body.page-id-85 .thb-social-home {
/* thb-social-home rules */
}
I have a header navigation with kinda difficult hover effect.
In order to make it dynamic and NOT hard-coded, I'm gonna have to use spans inside list elements or even better I'm gonna need entire navigation done using DIVs.
Is there a way to edit the wordpress function wp_nav_menu() (codex definition)
so that it will give me divs that I want instead of ul-li hierarchy?
Another solution is to build it the common way but then append spans to it using jQuery. But that's my last resort.
Has anyone had similar experiences?
Thank you
Edit:
instead of
<ul>
<li>...</li>
<li>...</li>
</ul>
I'm gonna need:
<div class="x">
<div class="y">
<div class="z">
</div>
</div>
<div class="y">
<div class="z">
</div>
</div>
<div class="y">
<div class="z">
</div>
</div>
</div>
You need to use a custom menu walker. See http://codex.wordpress.org/Function_Reference/wp_nav_menu and http://www.mattvarone.com/wordpress/cleaner-output-for-wp_nav_menu/ and other Google results for "wordpress menu walker"