0
Welcome Guest! Login
0 items Join Now

SOLVED Showcase image

Last Post
Search Topic

  • SOLVED Showcase image

    Posted 13 years 6 months ago
    • Hello,
      In using the existing showcase module for the image below the menu, Im trying to figure out how to create duplicate showcase modules with different images. I can't find the code that is calling for the img src... is it in the css? in the module html?

      Site is: http://50.116.66.186/~sbrodeo/SITE/

      You will see the new image posted there and I need the same showcase module on other pages, but with different images.

      Appreciate any help!
    • Last Edit: 13 years 6 months ago by doribeeler.
    #718745
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: SOLVED Showcase image

    Posted 13 years 6 months ago
    • Hi there,

      The image source is controlled by the RokStories modules as this is where you set the section/category to be displayed.

      Just add more RokStories modules with appropriate section/category and assign to the correct pages. :cheesy:

      I did notice that the text on the link you gave had been cut and pasted from Microsoft due to all the garbage code that gets added. This is not good practice.

      If this resolves your problem then please edit your first post in this thread by adding SOLVED at the start of the title and then select the green tick icon. This lets the moderators know that it can be moved to the solved section.

      Thanks for your cooperation :)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #718760

  • Re: SOLVED Showcase image

    Posted 13 years 6 months ago
    • Thanks David - first off, yes you are right about the microsoft code that was added by my partner and I get to fix that... I did notice now that the image is called by the style1.css code. I am not using the rokstories component, only the existing code with the demo install.

      I added a line to the css file, by just creating another duplicate style with a slightly different name. So let me back up in explaining. The following css calls out the image in the showcase module position:
      /* RokStories */
.rokstories-layout2{background: url(../images/backgrounds/style1/showcasebase.png) no-repeat;}

      I added to this:
      .rokstories-layout3{background: url(../images/backgrounds/style1/showcasebase_02.png) no-repeat;}

      So that in the new module the html now reads:
      <div class="rokstories-layout3">

      And it produces the following result:
      http://50.116.66.186/~sbrodeo/SITE/index.php?option=com_content&view=article&id=46&Itemid=53

      Any ideas on this one?
      Much appreciated!
    #718763
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: SOLVED Showcase image

    Posted 13 years 6 months ago
    • Hi there,

      OK - The main issue is that you have a call to .feature-block after the layout3 so the following code is being used...
      .feature-block {
    margin-left: 187px;
    margin-top: 88px;
}
      Either remove the call from the html or set it to look like this...
      .feature-block {
    margin: 0px;
}
      The reason you only see part of the image is because it is set as a background and the displayed text doesn't create enough height. To solve this you could add height:359px; to your code in style1.css at line 87...
      .rokstories-layout3 {
    background: url("../images/backgrounds/style1/showcasebase_02.png") no-repeat scroll 0 0 transparent;
    height:359px;
}
      Finally it might be nice to clear the gap at the top so everything falls under the menu. Open style1.css and at line 78 find the following code...
      #rt-showcase .feature-block .feature-title {
    color: #FF9A05;
    display: block;
    font-family: georgia,garamond,serif;
    font-size: 35px;
    line-height: 115%;
    margin: 10px 0;
}
      Change margin: 10px 0; to margin: 0 0 10px 0;. Now open template.css and at the bottom add this code...
      #rt-showcase .rt-grid-12 .rt-block {
    padding-top: 0;
}
      If this resolves your problem then please edit your first post in this thread by adding SOLVED at the start of the title and then select the green tick icon. This lets the moderators know that it can be moved to the solved section.

      Thanks for your cooperation :)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #718922

  • Re: SOLVED Showcase image

    Posted 13 years 6 months ago
    • Hey David, thanks for all these details! I am a bit concerned though before I start making all these code changes. The only difference between the modules on these two pages:
      50.116.66.186/~sbrodeo/SITE/
      and
      50.116.66.186/~sbrodeo/SITE/index.php?op...icle&id=46&Itemid=53

      is the css code that I created (duplicated) as noted above:
      .rokstories-layout3{background: url(../images/backgrounds/style1/showcasebase_02.png) no-repeat;}

      The html between the two modules is exactly the same with exception again to the div tag calling for the new css .rokstories-layout3 which is a duplicate of .rokstories-layout2.

      The full html for the 50.116.66.186/~sbrodeo/SITE/index.php?op...icle&id=46&Itemid=53 is:
      <div class="rokstories-layout3">
      <div class="feature-block" style="text-align: right;"><strong><span style="font-family: Consolas; color: #f26522; font-size: 14pt;">12th Annual Sheriff's PRCA PRO RODEO</span></strong>
      <p> </p>
      <p>The 2011 edition of the Sheriff's Rodeo, hit an all time high in its<br /> 12th year bringing it fans and charitable organizations a weekend to<br /> remember. Sheriff Hoops and his Deputies' of San Bernardino<br /> know how to deliver!</p>
      <p class="feature-desc" style="text-align: right;"><a href="#"><span>Read the Full Story</span></a></p>
      </div>
      </div>

      So, the point of all this is: wouldnt the items in the showcase from the Home page to the Features page be the same without going through all these css modifications? everything is the same, I just added a css line to accommodate a second module of the same type? If I make the css changes suggested below, will it not affect items in the module located on the home page to something other than what it is? I hope all this makes sense....
      Thanks so much!
    #718935
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: SOLVED Showcase image

    Posted 13 years 6 months ago
    • Hi there,

      OK - I see now - so you have removed layout2 and replaced with layout3. That's what happens when I only look at the problem page :oops:

      You then changed the css to change the background. What you didn't do is to add the extra css to format layout3 the same as layout2, as per template.css at line 70...
      .rokstories-layout2 {
    float: left;
    height: 359px;
    margin-top: -55px;
    position: relative;
    width: 960px;
}
      You need to change that to include layout3 so it should like this...
      .rokstories-layout2, .rokstories-layout3 {
    float: left;
    height: 359px;
    margin-top: -55px;
    position: relative;
    width: 960px;
}

      Hope this helps 8)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #718949

  • Re: SOLVED Showcase image

    Posted 13 years 6 months ago
    • oh joy, the missing piece of the puzzle! Thank you David! I will implement this right away and come back to mark this as solved.

      You are a saint - it worked! YEAH!
    #718952
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: SOLVED Showcase image

    Posted 13 years 6 months ago
    • You're welcome :cheesy:

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #718972

Time to create page: 0.056 seconds