Skip to content
This repository has been archived by the owner on Jan 2, 2025. It is now read-only.

Insert AdSense banner into header and disable comic date and user name. #65

Open
herrzeba1 opened this issue Feb 14, 2018 · 4 comments
Open
Assignees
Labels

Comments

@herrzeba1
Copy link

Hi,

Great responsive theme!

www.danandclue.com is my website. I'd appreciate if you could help me with few issues.

  1. I'm trying to add Google Ad Banner to my header to align to the right. I edited header.php as well as functions.php after researching online, but I could only insert it either above or below the header. Actually, I managed to insert it where header is, but that caused the header to disappear.

  2. I don't want Wordpress comments and I don't need date under comic nor any other stuff. I managed to add this to CSS: .post-footer {
    display: none !important;
    }
    but it still shows date and "admin". I disabled all comments options in standard settings.

  3. My comic is build from 3 separate images. Is there a way for them to remain current horizontal orientation before they kick in into responsive mode? (That is 3 panels on the same line, at specific width 3 of them become responsive and change to vertical). I played with responsive settings, but to no avail.

Please advise.
Thanks =)

@mgsisk mgsisk self-assigned this Feb 14, 2018
@mgsisk
Copy link
Owner

mgsisk commented Feb 14, 2018

Thanks @herrzeba1! For 1, you'll probably need to absolutely position the ad to get it where you want it; something like this may work:

.ad-container { /* You'll want to change this selector to the actual class or ID of the element that has the ad code in it. */
  position: absolute;
  right: 1rem;
  top: 1rem;
}

For 2, you'll want to get rid of .post-details:

.post-details {
  display: none; /* You shouldn't need !important */
}

For 3, you'll need some specific CSS to get this effect:

.webcomic-image a {
  display: flex;
  flex-flow: column;
}

@media screen and (min-width: 1024px) { /* Or whatever width your full-size display should kick in at. */
  .webcomic-image a {
    align-items: center;
    flex-flow: row;
    justify-content: center;
  }

  .webcomic-image img {
    flex: 0 1 100%;
    width: 10%; /* The flex size above will take precedence. */
  }
}

@herrzeba1
Copy link
Author

herrzeba1 commented Feb 15, 2018

Hi @mgsisk

Wow, this is amazing, thank you so much. For 2 & 3 it worked like a charm straight away!

I still can't get 1 working though.

Google code has this styling display:inline-block;width:728px;height:90px. I entered its script into HTML widget. The actual class or ID is .adsbygoogle. Then I added your code in Appearance -> Stylesheet.

.adsbygoogle { position: absolute; right: 1rem; top: 1rem; }

It still removes my header or it places it behind the header, like it is now on my website. It's in Page Header widget, any other widget it's either above or below. I could alternatively remove my header centre align and make it shorter, so the ad will be visible. However the best would be just to place it inside the header. This is out of the box functionality with Comic Press, but as I mentioned, that solution is not responsive.

EDIT: Interestingly, when I click on next nav http://www.danandclue.com/dan-clue/test/, the ad is in front of the header, not below, hmm.. But in home it's under.

Thanks =)

@mgsisk
Copy link
Owner

mgsisk commented Feb 16, 2018

No problem, glad to help! For the homepage, try adding z-index: 1; to the .adbygoogle block, like:

.adsbygoogle {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 1;
}

@herrzeba1
Copy link
Author

herrzeba1 commented Feb 16, 2018

Thanks. This worked! Yet it positioned absolute all my ads, so even sidebar rectangle was showing in the banner. I realised absolute position covers my banner when in responsive and viewed on mobile, so it's not ideal solution as it doesn't stick within the container/wrapper.

Then I had another idea. I removed banner from cutomize -> Header Image. I trimmed my banner and uploaded it to image widget in Page Header sidebar, then I added Custom HTML with ad script to same area and I managed to get both of them in the same space. My trimmed header aligned left, ad aligned right. I'm still experimenting with this, as I created responsive ad block, but I must wait few hours for this to show to keep playing with this.

Once again, thank you for all your amazing help!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants