XF 2.2 Using notices as a call to action

Chernabog

Well-known member
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:

CTA.jpg


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!
 

Chernabog

Well-known member
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
 

Chernabog

Well-known member
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 :)
 

oO5 Dynasty

Well-known member
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.
Proud Of You Reaction GIF
 

oO5 Dynasty

Well-known member
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.
 

RobinHood

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


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

oO5 Dynasty

Well-known member
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
Code:
.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

Code:
a1 a1--a1
Web capture_24-6-2022_103_user.oo5dynasty.com.jpeg

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.



Code:
<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>

Web capture_24-6-2022_1354_user.oo5dynasty.com.jpeg


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

Page criteria
Web capture_24-6-2022_11745_user.oo5dynasty.com.jpeg
scroll down
Web capture_24-6-2022_1102_user.oo5dynasty.com.jpeg



Web capture_24-6-2022_12056_user.oo5dynasty.com.jpeg


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.
 

oO5 Dynasty

Well-known member
@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/

Web capture_28-6-2022_202820_user.oo5dynasty.com.jpeg

Web capture_28-6-2022_203147_user.oo5dynasty.com.jpeg
 

Chernabog

Well-known member
@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

Well-known member
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.

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

oO5 Dynasty

Well-known member
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!

Web capture_10-7-2022_22206_user.oo5dynasty.com.jpeg


Paste this code!

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.
Web capture_10-7-2022_23137_user.oo5dynasty.com.jpeg






extra.less


Web capture_10-7-2022_22562_user.oo5dynasty.com.jpeg

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


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.
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"]

If you do not want to target certain templates, just use
Code:
.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.
Web capture_10-7-2022_233840_user.oo5dynasty.com.jpeg


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

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 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
 
Last edited:

Chernabog

Well-known member
Nag guest to register add-on.

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.
 
Top