Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages » Excerpts, Read more, Pagination »

How would you have a bigger Read More look like?


  #1  
Old Jul 9, 2014, 12:30 PM
Jerry_Q4d
 
22 posts · Apr 2014
Hi, I am currently redesigning my site to be more mobile-friendly. Most of it works allright using fingers to navigate, only the "read more" still bothers me. It is too small, or at least not high enough to be easily reachable with your thumb or index finger.
So I am trying to create a larger, clickable "read more" area. What I dont want to do is creating a huge box with an arrow on it. Rather, I would like to keep the "read more" text, but make it twice as high as a normal line of text.

I tried to use css commands to make the "read more" bigger. The downside is that the line of text in which it resides also gets bigger because of that, so that the spacing doesnt look good. Ideally, the "read more" would be twice as high as the text of the excerpt, and the excerpt would wrap around it. Any way to do that?
  #2  
Old Jul 9, 2014, 02:20 PM
lmilesw's Avatar
lmilesw
 
10,172 posts · Jul 2009
Central New York State USA
Could you post a link to your site so we can see what CSS might be needed?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jul 9, 2014, 03:04 PM
Jerry_Q4d
 
22 posts · Apr 2014
Here it is: http://extrajournal.net

Id like to keep the >>Weiter>> (read more), but make it bigger...
  #4  
Old Jul 9, 2014, 06:13 PM
juggledad's Avatar
juggledad
 
23,545 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I would try something like
HTML Code:
@media only screen and (max-width: 767px) {
   a.more-link:link,
   a.more-link:visited.
   a.more-link:active {
      line-height: normal;
      font-size: 34pk;
   }
}
changing the size too what you think is appropriate
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jul 9, 2014, 07:36 PM
lmilesw's Avatar
lmilesw
 
10,172 posts · Jul 2009
Central New York State USA
And here is some code that I came up with.
HTML Code:
.post-footer {
    margin-top: 10px !important;
}
.more-link span {
    font-size: 1.2em;
    padding: 5px;
    top: 10px;
    position: relative;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Jul 10, 2014, 07:18 AM
Jerry_Q4d
 
22 posts · Apr 2014
You are both great! I got both versions working! But what is actually better? Is it better to have the big version active all the time (lmilesw), or go with the @media query and use it only on the small screen (juggledad)?

What do you prefer, personally? I thought I would like to just have it big enough (one size fits all). But now I am not so sure. By the way, why do you use "@media screen only" juggledad? shouldnt it be "handheld"? I dont know much about responsive design, unfortunately
  #7  
Old Jul 10, 2014, 11:14 AM
juggledad's Avatar
juggledad
 
23,545 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
But what is actually better?
the one you and/or your users like

Quote:
why do you use "@media screen only" juggledad?
that's what I've seen used.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jul 20, 2014, 05:24 AM
Jerry_Q4d
 
22 posts · Apr 2014
Im still thinking about the right way to go about this... but I figured out why you shouldnt use "handheld" with @media

I dont recall the website now, but I read that "handheld" actually is the proper css tag for indicating content that should be displayed by handhelds... but the iphone, modern tablets etc. all ignore it and go with "screen" instead... so "handheld" is just an ignored standard sigh :-)
  #9  
Old Jul 21, 2014, 11:09 AM
Jerry_Q4d
 
22 posts · Apr 2014
OK, I have come up with a solution I like: Depending on the browser size it switches to a large grey bar containing the read more.

Code is as follows:


@media only screen and (max-width: 1000px) {
.post-footer {
margin-top: 10px !important;
}
.more-link span {
font-size: 1.2em;
display: block;
height: 100%;
width: 94%;
padding: 10px;
top: 5px;
position: relative;
}
}


So I am simply using "display: block" to fill the entire available space from left to right. Hope thats ok... it seems to work, at least. It seems better than to just make the read more bigger.

Now I just have one thing I would like to do: I would like to change the way the images are displayed. To be exact, I would like to have them come before the text of the excerpt (and not to the left of it). Can this be achieved with CSS? I dont seem to figure out which handle or hook I have to use...
  #10  
Old Jul 21, 2014, 11:48 AM
juggledad's Avatar
juggledad
 
23,545 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
I would like to change the way the images are displayed. To be exact, I would like to have them come before the text of the excerpt (and not to the left of it).
do you mean you want the thumbnail to show then a newline where the excerpt will start?
as opposed to the thumbnail on the left with the test starting at the top right ofthe image and wrapping around it (if there is more text than the height of the image)

if you want the first case I think you are going to have to edit the theme code unless you can find a plugin that will do it for you..
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jul 21, 2014 at 11:52 AM.
  #11  
Old Jul 21, 2014, 01:26 PM
Jerry_Q4d
 
22 posts · Apr 2014
Actually I thought you could just define a large padding to the right and left with css. or set the size as 100% so that the image would fill the available width of the main column, then the text would follow below it.

Basically similar to your example, juggledad, but with images, not text. I am not working with thumbnails, but just placing the image as the very first element of a post, so it should be easy, actually

Im still not very good with css, but maybe it would be something like

img {size: 100%}

or

img {
padding-left: 50px;
padding-right: 50px;

or something similar
  #12  
Old Jul 21, 2014, 06:54 PM
juggledad's Avatar
juggledad
 
23,545 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
when you add the image to the post, try selecting 'full-size'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Jul 22, 2014, 04:57 AM
Jerry_Q4d
 
22 posts · Apr 2014
What I would like to do is influence the images with css, but only if screen size is below 1000, so that I can go with your solution, juggledad.

At this point, I am trying "clear: both;" applied to .post img and .wp-caption to forbid other elements from floating around it. That should put the text of the excerpt below the image, if the screen is small i.e. if used on a handheld. Using the firefox inspector, it seems that the css is actually applied to the right elements, but it doesnt do anything (you can check at my site).

Full code looks like this at the moment:

@media only screen and (max-width: 1000px) {
.post img {
clear: both;
}
.wp-caption {
clear: both;
}
.post-footer {
margin-top: 10px !important;
}
.more-link span {
font-size: 1.2em;
display: block;
height: 100%;
width: 94%;
padding: 10px;
top: 5px;
position: relative;
}
}
  #14  
Old Jul 22, 2014, 07:03 AM
Jerry_Q4d
 
22 posts · Apr 2014
Argh, I figured it out myself. Only I dont know why it works :-(

In any case, it works if you apply the "clear: both" not to the images, but to the text of the excerpt. So I am using this now, and it works:

div.post-bodycopy p {
clear: both;
}

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Thumbnail of last article bigger brunoscala Excerpts, Read more, Pagination 0 Feb 3, 2012 04:32 PM
[SOLVED] bigger logo messes up alignment - how to shift down? ikllc Header configuration & styling 2 Jan 10, 2011 05:26 PM
[SOLVED] Bigger Post Area jnest Center area post/pages 2 May 26, 2010 05:55 AM
How to change the RSS and Comments icon to a bigger one??? ngc RSS, Feeds & Subscribing 6 Jun 19, 2009 12:52 PM
Possible to make css/html inserts box bigger? BigG Atahualpa 3 Wordpress theme 2 Apr 28, 2009 12:07 PM


All times are GMT -6. The time now is 09:16 AM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.