[Resolved] Is it possible to add an image-link next to the text container in this theme ?

[Tom]

So, as the title suggests, I was wondering if it is possible to add an image-link to promote a certain website to the left/right side of the text on every page ?

For example, to the left of the whole page content beneath the navigation menu here ; http://gyazo.com/b875ffe8a24ae9f0e4b5658bc11a05e0

[Tom]

Hi there,

You could try doing something like this:

1. Using GP Hooks, add the HTML for your image link in the “Inside Content Container” hook.

Wrap this HTML around your image HTML:

<div class="outside-image">
      Your HTML in here
</div>

2. Add this CSS:

.outside-image {
      position: absolute;
      left: -100px; /* you'll have to adjust this */
      z-index: 1000;
}

3. Then you may want to hide it on mobile:

@media (max-width: 768px) {
      .outside-image {
            display: none;
      }
}

[Tom]

Well, I tried it, changed the “left:” part to 250px, but I can not set it up to be right next to the text.
Not sure if the z-index has anything to do with that, I tried changing it to different numbers, but it just stays the same.

Not sure if you understand what I mean, but I would like the black picture to be right underneath the main navigation menu, and here you can see where it actually is with these codes : http://csgobm.com/about/

[Tom]

Oh, nevermind, I just moved the html up in the text, and it’s fine now.
One last thing, is it possible to set it to be next to the “About” word on the same link as above. ( http://csgobm.com/about/ )

[Tom]

Sorry for the spam, and multiple posts, but I had to remove the blank image in the end, since we’re expecting a lot of traffic today, and it looked very weird.

Here is what it looked like; http://gyazo.com/c574c9c225bf4a1e609b40e318ead405
I would like to move the image up so that it starts next to the “About” page title, and goes down next to the text.

[Tom]

Try adjusting your CSS to this:

.site-content {
      position: relative;
}

.outside-image {
      position: absolute;
      left: -100px; /* you'll have to adjust this */
      top: 0;
      z-index: 1000;
}

[Tom]

Thanks, it worked.
One more thing, is there a possibility to make it move together with the slider when somebody is scrolling down on the page ?

[Tom]

You could try targeting it with this plugin: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

[Author]

Posts