Singl Theme

• 

  aruragaming · Member · Jul 14, 2014 at 7:16 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  sandymcfadden · Member · Jul 14, 2014 at 11:08 pm

  • Copy link

  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;
  }

• 

  aruragaming · Member · Jul 15, 2014 at 6:34 am

  • Copy link

  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.

• 

  sandymcfadden · Member · Jul 15, 2014 at 11:34 am

  • Copy link

  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.

• 

  designsimply · Member · Jul 15, 2014 at 12:38 pm

  • Copy link

  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;
  	}
  }

• 

  sandymcfadden · Member · Jul 15, 2014 at 12:58 pm

  • Copy link

  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;
  	}
  }

• 

  designsimply · Member · Jul 15, 2014 at 3:55 pm

  • Copy link

  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?

• 

  sandymcfadden · Member · Jul 15, 2014 at 3:59 pm

  • Copy link

  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.

• 

  designsimply · Member · Jul 15, 2014 at 7:02 pm

  • Copy link

  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. :)

• 

  sandymcfadden · Member · Jul 15, 2014 at 7:04 pm

  • Copy link

  Excellent, thanks for the tips @designsimply

• 

  designsimply · Member · Jul 15, 2014 at 9:53 pm

  • Copy link

  Thanks back at you! :)

• 

  aruragaming · Member · Jul 16, 2014 at 12:01 am

  • Copy link

  Thanks a lot for your help @designsimply and @sandymcfadden