Singl Theme

  • Author
    Posts
  • #1946128

    aruragaming
    Member

    Greetings

    I have theme options like twitter instagram..etc are down below in the site, how can i have them in the begging of the page?in a pc they are up but in a mobile they go down.

    also, how can i make the comment and date in the bottom of the post instead of the top?

    and how can i remove “This entry was posted in Pc. Bookmark the permalink. Edit”

    Thanks

    The blog I need help with is aruragaming.com.

    #1946310

    Hi aruragaming,

    I think this code in your Custom CSS should do what you are looking for.

    Let me know if this does what you like.

    article.post {
      position: relative;
    }
    
    article.post footer.entry-meta {
      display: none;
    }
    article.post div.entry-meta {
      position: absolute;
      bottom: 0;
    }
    article.post #jp-post-flair {
      position: absolute;
      top: 80px;
    }
    article.post .entry-content {
      padding-top: 120px;
      padding-bottom: 30px;
    }
    #1946329

    aruragaming
    Member

    Thanks for the quick reply

    everything worked fine except the twitter, youtube and instagram they still in the bottom on a mobile version, and on a PC its on the top.

    i want them always on the top on a PC version and mobile please.

    #1946336

    Hi aruragaming,

    No problem. I took a look at this but the way the theme handles the placement of those social links is done in JavaScript. I think the only way to change it’s placement on mobile would be to edit the JavaScript. Unfortunately that is part of the theme we aren’t able to change.

    #1946338

    You can move the social links using absolute positioning and a media query to limit the rule to small screens only. Here is an example to get you started:

    @media only screen and (max-width: 767px) {
    	#page {
    		position: relative;
    	}
    	#social-links-wrapper {
    		position: absolute;
    		top: 0;
    		padding: 0;
    		background: inherit;
    	}
    	#header-wrapper {
    		z-index: 1;
    	}
    }
    #1946339

    Ah very nice @designsimply. Thanks for setting me straight.

    I came up with this using your starter which seems to work well.

    @media only screen and (max-width: 767px) {
    	#page {
    		position: relative;
    	}
    	#social-links-wrapper {
    		position: absolute !important;
    		top: 0;
    		padding: 0;
    		background: inherit;
                    z-index: 9999 !important;
                    padding: 0 !important;
                    margin: 0 !important;
    
    	}
    	#header-wrapper {
    		z-index: 1;
    	}
    }
    #1946342

    Cool!!

    Do you think the !important tag is really needed?

    Also, z-index: 9999 seems high, although the theme had the same thing on #header-wrapper before! Do you think changing the z-index on #social-links-wrapper is needed if it’s already moved lower for #header-wrapper?

    #1946344

    I was just testing in Firefox using the the edit css feature of the Web Developer extension.

    There were at least a couple of those items that needed the !important tag to work, but it could have been where I was inserting the css.

    I tried a number of z-index’s started with 9, then went to 99, then 999, it wasn’t until I got to 9999 that they showed above the #header-wrapper.

    #1946362

    I tested in Chrome 35 originally, but the first example seems to work for me in Firefox as well. Where you add the CSS does matter. When testing in Firefox, I usually go to Tools > Web Developer > Style Editor and click the “New” button (near the top left of the panel). That’s the closest approximation to adding CSS to the bottom of the Appearance > Customize > CSS editor in WordPress.com.

    I don’t think you need the extra z-index or !important on anything for this case. :)

    #1946363

    Excellent, thanks for the tips @designsimply

    #1946372

    Thanks back at you! :)

    #1946377

    aruragaming
    Member

    Thanks a lot for your help @designsimply and @sandymcfadden

The topic ‘Singl Theme’ is closed to new replies.