XF 2.2 Using notices as a call to action

[Chernabog]

I hope this is the right forum for this, so I apologize in advance if it is not.

I am very interested in using the notices system built into XF as a tool for creating call to action content. It's out of my wheel house, but I have seen it done on other installations using simple code in the body of the notice wanted to be turned into a CTA.

An example is this:




As mentioned I've seen this type of CTA created under the notices system using code within the notice and, of course, with the use of a slider for XF. Which is something I need to research next to see if there is a stand alone slider available to be dropped into various parts of a XF installation via widgets... cause that would be a lot easier than worrying about code!

I understand XF rather well, but I am not a HTML/CSS person... so any assistance in turning me in the right direction or even if there is someone out there interested in making an add-on, writing up some code or pointing me to a slider I can drop into my theme (I am using TH's ACE theme) would be very helpful!

Thanks much!

 

[beerForo]

Maybe the Advertising option is better for this?

 

[Paul B]

Inspect the page source and you can copy the structure of the HTML/CSS.

 

[Anatoliy]

Maybe the Advertising option is better for this?

True. Except the notices system allows to provide people, who are getting tired of an ad, an option to hit a cross in the top right corner, and an ad system doesn't, as far as I know.

 

[Chernabog]

Inspect the page source and you can copy the structure of the HTML/CSS.

Yea I actually tried that but it did not go as expected.. I think I needed to make some mods which would have been possible if I were savvy in such things.

Advertising really isn't the way to go to achieve the desired results.

I am sure there are people with XF installations who are doing exactly what I asked about using HTML/CSS .. I just need to find them lol

 

[Chernabog]

I wonder if @BassMan would be interested in helping with this...if time is free for some comish-able help

 

[oO5 Dynasty]

I hope this is the right forum for this, so I apologize in advance if it is not.

I always post in the wrong forum lol. I be trying so hard to pick the right one, but some of them still get moved lol. I feel like a kid who can't get things right lol.

 

[oO5 Dynasty]

I hope this is the right forum for this, so I apologize in advance if it is not.

I am very interested in using the notices system built into XF as a tool for creating call to action content. It's out of my wheel house, but I have seen it done on other installations using simple code in the body of the notice wanted to be turned into a CTA.

An example is this:

View attachment 269905


As mentioned I've seen this type of CTA created under the notices system using code within the notice and, of course, with the use of a slider for XF. Which is something I need to research next to see if there is a stand alone slider available to be dropped into various parts of a XF installation via widgets... cause that would be a lot easier than worrying about code!

I understand XF rather well, but I am not a HTML/CSS person... so any assistance in turning me in the right direction or even if there is someone out there interested in making an add-on, writing up some code or pointing me to a slider I can drop into my theme (I am using TH's ACE theme) would be very helpful!

Thanks much!

This is something I am very interested in also. I'm currently using ads for this but would love to edit notices like this.

 

[Chernabog]

This is something I am very interested in also. I'm currently using ads for this but would love to edit notices like this.

I think it has a lot of functionality outside of just say my own self interest... so thanks for adding to that @oO5 Dynasty

I mean yea I could get another copy of Sirupo's Ad Manager, but I think for something as small as this idea notices would be so much better. Plus I have zero design skills so it's just a lot easier to have a template where I can add a picture, some text and title the button whatever I want and have it put out via notices.

Now it's just finding someone interested in helping lol

 

[RobinHood]

There's some css in the OP of this thread you could probably work with

Sign Up / Welcome Notice [Deleted]

Here is some simple steps to creating a Welcome Notice, I use it on my site and have had a few members ask about it here. The idea originated from Kier's example in this post. I just added the "Sign Up Now" button and made some extra CSS rules for my needs. First off create a new notice by...

xenforo.com

One of the last posts in that thread actually shows Crusader Kings 2

 

[Chernabog]

That's the one!! I will look at it and see .. thanks, @RobinHood appreciate it.

 

[oO5 Dynasty]

For the most part, I figured it out, but I'm still messing with it. At least I got the background image to work lol.

I'll post what I have so far.



Extra.less

.a1.a1--a1
{
  background-image: url("styles/XenSoluce/UserMoodsManager/Bard-Astro-1024x604.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.a3 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

To call the background CSS class

a1 a1--a1

Now Edit the message field.
For the first div class, you must put the class that calls the background code from extra.less
a1
For the 2nd div class, you put the class that calls the text coloring etc.
a3
You should name your (class) to something better.

I was just rushing and put anything.

<div class="a1">
  <div class="a3">
    <h1 style="font-size:50px">I am Jane Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button>
  </div>
</div>

Now to place the notice on certain templates, head over to this tab.

Page criteria

scroll down







Now, I'm a mess around with the div to get the box contents to display what I want. But since I don't really know how to do that I'll be right back lol.

 

[BassMan]

I wonder if @BassMan would be interested in helping with this...if time is free for some comish-able help

@RobinHood pointed you in the right direction. I think you'll get it on.

 

[Chernabog]

@RobinHood pointed you in the right direction. I think you'll get it on.

You have a lot of faith in me it seems lol

 

[Baby Community]

Stronghold Crusader It was a strategy game that I fell in love with and played for years. When I saw that look, it reminded me

 

[oO5 Dynasty]

@Chernabog
I believe I figured it out.
I have the content inside a flexbox sitting to the left with a button. The button has a hover effect which is nice.
This has a background image as well, and it is responsive.
I basically took myself to school, the last couple of days to figure this out lol. (A ton of tutorials)
So thank you for the inspiration actually, cause my notices are looking good now. Plus they act as a Cover, Banner, type thing while sitting at the top of pages.
You can set the notice to never be closed which I am leaning towards for certain pages.

Examples:
https://user.oo5dynasty.com/index.php?media/

This example has a background image in the first column and a youtube video in the second column.
https://user.oo5dynasty.com/index.php?whats-new/

 

[Chernabog]

@Chernabog
I believe I figured it out.
I have the content inside a flexbox sitting to the left with a button. The button has a hover effect which is nice.
This has a background image as well, and it is responsive.
I basically took myself to school, the last couple of days to figure this out lol. (A ton of tutorials)
So thank you for the inspiration actually, cause my notices are looking good now. Plus they act as a Cover, Banner, type thing while sitting at the top of pages.
You can set the notice to never be closed which I am leaning towards for certain pages.

Examples:
https://user.oo5dynasty.com/index.php?media/

This example has a background image in the first column and a youtube video in the second column.
https://user.oo5dynasty.com/index.php?whats-new/

View attachment 270261

View attachment 270262

Dude that's amazing...that's exactly what I was trying to create -- you, sir, are awesome! Sorry for the long delay in getting back to you...been a hectic time!


Wow.... Your site is badass, I especially like the floating register, etc... good work!

 

[oO5 Dynasty]

Dude that's amazing...that's exactly what I was trying to create -- you, sir, are awesome! Sorry for the long delay in getting back to you...been a hectic time!


Wow.... Your site is badass, I especially like the floating register, etc... good work!

Nag guest to register add-on.

[OzzModz] Nag Guests To Register

This is a recreation of the vBulletin addon https://www.vbulletin.org/forum/showthread.php?t=272295&highlight=Register This addon will ad a floating image(s) to your pages, encouraging guests to register. The addon comes with the following...

xenforo.com

I just designed my own picture, featuring my logo.
@Ozzy47 is a super developer.

 

[oO5 Dynasty]

Ok so in order for this to work, you will be using the message section inside notices, along with the extra.less template.
The extra.less will contain the css that will speak to your code that is placed inside the message section of the notice you are creating.


Create New Notice!




Paste this code!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Mobile First Multi Column Layout - SoftAuthor</title>

</head>

<body>
    <!-- TWO COLUMN -->
    <section class="two-column background1-image">
        <div class="box-1">
           <span>

    <h1 style="font-size:30px">Media Gallery</h1>
    <h3>Post content today!</h3>
         <form action="https://youtu.be/0FbhbeDcqlk" method="get" target="_blank">
         <button class="btn" type="submit">My Bard Gameplay</button>
      </form>
      <p>Peep my youtube video</p>
            </span>
        </div>


       
       
    <div class="two-column box-2 videoResponsive2">

</div>  
       
       
       
       
       
    </section>

 
</body>

</html>

Change the h1,h3, form action, and button class to fit your needs.







extra.less




Head over to your extra.less, then paste this code.

/* ONE COLUMN */
.one-column {
    text-align: center;
}



/* TWO COLUMN FLEXBOX */
.two-column {
    display: flex;
    flex-direction: row;
}

.two-column div {
    border: 0px solid blue;
    flex: 1;
    display: flex;
    color: white;
}



.two-column.reverse {
    flex-direction: row-reverse;
}

@media only screen and (max-width: 600px) {
    .two-column,
    .two-column.reverse {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}


/* THREE COLUMN */
.three-column {
    display: flex;
    align-items: stretch;
}

.three-column div {
    flex: 1;
    border: 1px solid;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .three-column,
    .three-column div {
        flex-direction: column;
       
    }
}

/* .box */



  .box-1{
    flex:1;
    order:1;
    padding-left: 30px;
    padding-top: 50px;
    justify-content: left;
    align-items: center;
    text-align: center;    
     
  }


  .box-2{
    flex:1;
    order:2;
    justify-content: center;
    align-items: center;
    text-align: center;    
  }




  .box-3{
    flex:1;
    order:1;
    padding-left: 30px;
    padding-top: 50px;
    justify-content: center;
    align-items: center;
    text-align: center;    
     
  }


/* .btn */


.btn {
  border-radius: 6px;
  padding: 12px 20px;
  background: #9867C5;
  border: none;
  margin-left: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

.btn {
  transition-duration: 0.4s;
}

.btn:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}



/* .videoResponsive */



.videoResponsive {
    width:426px;
    height:260px;
}


.videoResponsive2 {
    width:426px;
    height:280px;
}

/* .background1-image */



.background1-image {
  background-image: url("styles/XenSoluce/UserMoodsManager/Bard-Astro-1024x604.jpg");
  width: 100%;
  height: auto;
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

To change the color of the button, You will edit the .btn section.
To change the background image for the notice, you will edit the URL for the .background1-image section


extra.less

To change the size of the padding for notices, you can apply this code.

[data-template="tlg_group_index"], &[data-template="whats_new"], &[data-template="xfmg_media_index"],
.notice-content {
    padding: 0px;
}

I am targeting certain templates
Example:
[data-template="whats_new"]

What's new

user.oo5dynasty.com

If you do not want to target certain templates, just use

.notice-content {
    padding: 0px;
}

If you want a different version for your notices, I made one where the left flex box has a background image and the right flex box has a youtube video.

What's new

user.oo5dynasty.com

Paste this code in the message section of the notice you create.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Mobile First Multi Column Layout - SoftAuthor</title>

</head>

<body>
    <!-- TWO COLUMN -->
    <section class="two-column background1-image">
        <div class="box-1 background1-image">
           <span>

    <h1 style="font-size:30px">Resource Cloud</h1>
    <h3>Download our content</h3>
         <form action="https://youtu.be/0FbhbeDcqlk" method="get" target="_blank">
         <button class="btn" type="submit">MY Bard Gameplay</button>
      </form>
      <p>Peep my youtube video</p>
            </span>
        </div>


        
        
    <div class="two-column box-2 videoResponsive2">
 <iframe width="100%" height="100%" src="https://www.youtube.com/embed/0FbhbeDcqlk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>   
        
        
        
        
        
    </section>

 
</body>

</html>

<section class="two-column background1-image">
<div class="box-1 background1-image">

This code is looking inside the extra.less to find css for the image url


.background1-image {
background-image: url("styles/XenSoluce/UserMoodsManager/Bard-Astro-1024x604.jpg");
width: 100%;
height: auto;
background-color: #cccccc; /* Used if the image is unavailable */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}













@Chernabog
Thank you for the kind words about my site, now I just need to finish it lol.

I hope this helps tho ty

 

[Chernabog]

Nag guest to register add-on.

[OzzModz] Nag Guests To Register

This is a recreation of the vBulletin addon https://www.vbulletin.org/forum/showthread.php?t=272295&highlight=Register This addon will ad a floating image(s) to your pages, encouraging guests to register. The addon comes with the following...

xenforo.com

I just designed my own picture, featuring my logo.
@Ozzy47 is a super developer.

Yeah I am a fan of @Ozzy47 .. amazing developer and very active in the community and with end users.