SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

floating/fixed adsense banner

5 years 7 months ago #122635 by artctrldel.info@gmail.com
floating/fixed adsense banner was created by artctrldel.info@gmail.com
Hi,

I want to create a floating/fixed adsense banner to my site www.artctrldel.net

I want the last adsense banner when scrolling down to stnad still while the rest scrolls down.

Thank you, looking foward to get support :)

Benjamin

Please Log in to join the conversation.

5 years 7 months ago #122654 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Hi Benjamin,

You can create a module with a module in "debug" position (if your template allow it) and add the example CSS from this tutorial to make it fixed.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago #122658 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Hi Valentin,

Thanks for the fast reply.

How do I choose the module with the adsense banner, from the module in it since it's on debug?

Thanks again.

Please Log in to join the conversation.

5 years 7 months ago #122664 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
When you create your module through Extensions > Modules > Your adsense banner module
Set the position "debug"



Of course, check if your current template has that position available.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

This message has an attachment image.
Please log in or register to see it.

The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122669 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
I have created a module i called "module in a module" set with the position i want my banner. Then I set the module with my adsense banner to debug.

The module don't show on frontend.

Where do I post the CSS code?

Thank you very much!

Please Log in to join the conversation.

5 years 7 months ago #122692 by Valentin
Replied by Valentin on topic floating/fixed adsense banner

I have created a module i called "module in a module" set with the position i want my banner. Then I set the module with my adsense banner to debug.

  • What's the module position?
  • In Menu assignment be sure the module is assigned to the pages you need
Note, I mentioned "debug" position as a suggestion. In case I didn't explained correcty before.

Add the custom CSS as this post explains .

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122694 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Hi :)

Module position is sidebar 3

Template module positions: www.rockettheme.com/docs/joomla/template...burner2/positions.md

Both modules are set to all pages under menu assignment.

And both modules. The banner module and the module within a module are set to sidebar3 position.

Please Log in to join the conversation.

5 years 7 months ago #122697 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
For some reason I can't install "Add Custom Css". Can't find XML setup file.

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122699 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
I have JCE editor, is it usable?

I have Rokpad aswell :)

www.rockettheme.com/docs/joomla/extensions/rokpad

Please Log in to join the conversation.

5 years 7 months ago #122706 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
You need to decompress the first downloaded zip, as the tutorial explains in "Step 2: Download and Install".

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #122712 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
oh... Done. So what CSS do i post?

Please Log in to join the conversation.

5 years 7 months ago #122721 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Check the example from this tutorial .
The base CSS to use is:
.your-selector-here {
    position: fixed;
}

Replace ".your-selector-here" with the class or id that contain your adsense banner module.

If you're not familiar with it, consider taking a look to our Firebug tutorial to learn how to debug it.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122738 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
So I post the CSS code in the CSS-plugin in Custom CSS File Path 1? How does the CSS know what module to style?

I still don't understand how the module in a module works. Does the CSS go to the adsense module or the other module?

Thank you :)

Please Log in to join the conversation.

5 years 7 months ago #122770 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Please re-check the tutorial. There we explain how the plugin will load a custom CSS file.

Note, adding custom CSS and a module are two separate tasks, which in this case complement each other.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #122840 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Hi Val,

How do I detemine my selector?

Thanks

Ben

Please Log in to join the conversation.

5 years 7 months ago #122846 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Hi Benjamin,

The selector is the id or class that contains the adsense banner. By using Firebug addon in Firefox browser , you can figure out the selector.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #122852 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
"rt-block"?

Should I wait posting this CSS untill the other CSS is working?

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122854 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
I did as the other CSS except i named the file mycustom2.css

.rt-block {
position: fixed;
}

And the page messes up totally :)

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122870 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Don't use .rt-block, because is a class used in other areas of the site. Look for a unique class, id or build a selector that only applies for this content.

By the way, you can add more custom CSS to the previous file (mycustom.css). No need to create extra files.

May you point me exactly which content are you trying to target? The screenshot is resized too small when is uploaded.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122872 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Same file, nice.

It's the html module named banner3 with the adsense banner in it.

Thanks.

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago #122881 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner

Please Log in to join the conversation.

5 years 7 months ago #122891 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Use this selector instead:
#rt-top .rt-omega > .rt-block {
    // your CSS here
}

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #122893 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
#rt-top .rt-omega > .rt-block {
// position: fixed;
}

not working...

Just to make sure: When I update the CSS folder with new code, I paste it in the folder on my desktop and refresh the folder in filezilla afterwords?

Thanks again.

Please Log in to join the conversation.

5 years 7 months ago #122902 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Remove //:
#rt-top .rt-omega > .rt-block {
  position: fixed;
}

I forgot to mention, in CSS adding // would disable that line of code. Sorry about that.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #122914 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Mornings Val,

For some reason it dosen't work:

artctrldel.net/templates/rt_afterburner2/css/mycustom.css

Thank you

Benjamin

Please Log in to join the conversation.

5 years 7 months ago #122953 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Hi Benjamin,

The CSS is working in my end. The position: fixed is being applied, however the module now is empty due needs a fixed size.

Update the CSS to this:
#rt-top .rt-omega > .rt-block {
  position: fixed;
  width: 500px;
  height: 200px;
}

Change the values (500px and 200px) to match the ad size.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122954 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Hi valentin,

It's actually working.

Unfortunally it's the wrong banner.

It's the one in right side comming last when scrolling down. Titled banner 3.

please have a look www.artctrldel.net

PS: The adsense banner is responsive.

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122956 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Please follow the same pattern I suggested, use the selector to target the ad you need as I explained before. Firebug addon will be very useful.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago #122959 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
I know, I'm having a hard time determine what class to use. I tried:

#rt-sidebar-c .rt-omega > .rt-block {
position: fixed;
width: 500px;
height: 200px;
}

Changed top to sidebar-c

Not working

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #122967 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Don't worry, you're doing a great progress, Benjamin!

If the ad is overlaid by other elements, add z-index: 999; property. Play with 999 value depending the result.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #122970 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Thanks man...
I'm a bit confused though. Like this?



#z-index: 999; property> .rt-block {
position: fixed;
width: 500px;
height: 200px;
}

Please Log in to join the conversation.

5 years 7 months ago #122994 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
I need the selector of the ad pointed out on the image.

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago #123001 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Sorry for not being clear. The code should be this way:
#rt-sidebar-c .rt-omega > .rt-block {
position: fixed;
width: 500px;
height: 200px;
z-index: 999
}

I highly recommend you to take our CSS classes to be more familiar with the topic.
The introduction to CSS class would provided you the basics.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123002 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Thank you very much! :)

It dosen't grab it though.

www.artctrldel.net/templates/rt_afterburner2/css/mycustom.css

Please Log in to join the conversation.

5 years 7 months ago #123003 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
As soon as I get my page launched I'll start taking your CSS course. :)

Please Log in to join the conversation.

5 years 7 months ago #123021 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
I just published the tutorial that will help you to figure out the selector: www.ostraining.com/blog/coding/css-selectors-firebug/

Pay special attention to the last section "Use a compound selector to customize an element"

For this request, it's very important to learn the CSS basics.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123030 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Nice toturial. Cute couple - good one :))

My CSS:

#rt-sidebar-c .rt-omega > .rt-block {
position: fixed;
width: 300px;
height: 600px;
z-index: 999
}

I believe I have to change .rt-omega to a compound. I'm just having a really hard time reading the ad. The obvious class is .re-block. Id is #rt-sidebar-c and the compund is a google link ???

www.artctrldel.net

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123036 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
My patience is running out. I need to get this fixed. When I have found the selector I still need it to be fixed from a given position to another. I feel like nothing happens, it's status-quo.

Theirs no need to drag the tasks out. I'll stay as a member if If I get things done.

I'm interested in learning the basics of CSS and programming in general, but I want my page up and running first - and I'm so close.

How about a deal? I have had an Art Ctrl Del page up before and it ended with 30.000 - 50.000 views a day. I can generate 10.000 views a day on this page within a week or two. IF you'll help me to get my tasks fixed fast, You can have your banner where I have my art ctrl del banner? :D In two months. And I'll stay as a member.

Please Log in to join the conversation.

5 years 7 months ago #123046 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Hi Benjamin,

I understand. Unfortunately, since your request involves CSS, it's very important you watch some videos to get familiar with the topic.

Playing with the CSS properties (such as width, height, position, etc) through Firebug, will help you to figure out the code you need.

Hopes this clarification helps

Where exactly do you want to display the ad banner? i.e. top-right of your screen

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123047 by steve
Replied by steve on topic floating/fixed adsense banner
Hi Benjamin

Many thanks for being a member and working through this task.

One thing to emphasise is that we are a training site. We've a support philosophy here: www.ostraining.com/support-forum/faq/

Our goal is to teach you how to use Joomla, Drupal or WordPress. Rather than do it for you, we will always to try to explain how you can do something. We'll guide you through the process, answer questions and write tutorials for you, but the focus will be on enabling you to the task.


So that's the guideline we give to our support team. We don't do development work for our members, but instead we aim to empower them.
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123059 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
TRied this, not working:

#rt-sidebar-c- > .rt-block .rt-block {
position: fixed;
width: 300px;
height: 600px;
z-index: 999
}

I want the banner to stop when scrolling down like here:'

www.boredpanda.com/

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123062 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
There is a typo:
#rt-sidebar-c-

I guess it should be:
#rt-sidebar-c

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123106 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Changed the typo, still no response.

Tough one...

Please Log in to join the conversation.

5 years 7 months ago #123122 by Nick
Replied by Nick on topic floating/fixed adsense banner
Hi artctrldel,

Make sure you clear your site and browser cache afterward, that way you can for sure see the changes (rather than a cached old copy).

Let us know if still doesn't work though, and we'll be glad to help.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123128 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Hi Nick,

I just cleared cache and It still don't grab it...

Thank you

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123194 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
I found a module that works. "Stick on Scroll from Plugin Valley.

Please have a look: www.artctrldel.net

My question now is: How do i change the div with my custom HTML?

So I can have banner 3 in stick on scroll?

Thank you :)

Benjamin

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123208 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
Hi Benjamin,

How do i change the div with my custom HTML?

What do you mean? Please elaborate

UPDATE: I guess you want to insert the ad, right? In that case, just paste the code inside the sticky div

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123220 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Thanks, so close.

When I post the adsense-html in the div content it dosen't show.

The module generates some CSS:

background: none repeat scroll 0 0 #0C1A3E; color: #FFFFFF; height: 30px; margin: 0 10px !important; min-height: 600px; padding: 15px 15px 15px 0; width: 300px; z-index: 100000;

I changed the size, unfortunally it didn't help.

Please Log in to join the conversation.

5 years 7 months ago #123262 by Valentin
Replied by Valentin on topic floating/fixed adsense banner
I don't see the sticky module in your site. I still see the ad on the very top without change.
Am I missing something?

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123270 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic floating/fixed adsense banner
Hi Valentine,

I turned it of, couldn't get it to work. When I post the Adsense HTML in the DIV Content area in the "Stick and Scroll" module it displays some HTML on a blue background.

I hope I'm not breaking any rules, but I'll pay OStraining $50 to fix it.

Thanks.

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!