HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Couple of Image Questions

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#93142 (In Topic #18641)
Avatar

Fan in action

Hi All,
Working with Version 9 and have a couple of questions regarding images.

1) What is the easiest way to add a background to the side/navigation panels (i.e. panel_left)

2) Can the individual boxes - for example, on the forums page here where it says "Forums" and "Points leader-board" - have an image background as opposed to the image gradient? Not the entire box...just the top title.

Thanks in advance!

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#93143
Avatar

Community saint

Hey Erich,

Just dropped in to break the monotony of re-installing my apps, and saw this.

Try …

.box_inner>h1, .box_inner>h2, .box_inner>h3, .box_inner>h4, .box_inner>h5, .box_inner>h6, .toggleable_tray_title, #standalone_html_wrap .box .box .box_inner>h2, #standalone_html_wrap .box .box .box_inner>h3

… in global.css

But, be warned, this may well affect other 'headers' that you don't want to touch!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#93194
Avatar

Fan in action

Hey Fletch,
Always great to see you and hear your suggestions.

I found this in 'global.css' (approx. line 640) - can it be modified to have an image background?
-(providing, of course, I upload an image as is specified below)

~~~~~~~~
#panel_left {
    float: {!en_left};
    background-image: url('{http://mysite.com/images/panel_left_background.jpg}');
    {+START,IF,{$NOT,{$MOBILE}}}
        margin-{!en_left}: 1em;
    {+END}
    {+START,IF,{$MOBILE}}
        padding-{!en_left}: 1em;
        padding-{!en_right}: 0.5em;
        {$BETA_CSS_PROPERTY,box-sizing: border-box;}
    {+END}
}

#panel_right {
    float: {!en_right};
    {+START,IF,{$NOT,{$MOBILE}}}
        margin-{!en_right}: 1em;
    {+END}
    {+START,IF,{$MOBILE}}
        padding-{!en_right}: 1em;
        padding-{!en_left}: 0.5em;
        {$BETA_CSS_PROPERTY,box-sizing: border-box;}
    {+END}
}

~~~~~~~~

I'm still fumbling my way through learning style sheet coding, so thanks in advance for your patience and understanding!

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#93196
Avatar

Community saint

Yeah, should work, but with one slight mod:

Change:
to …
background-image: url('{$BASE_URL}/mysite.com/images/panel_left_background.jpg
');

See how that works for you …

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#93261
Avatar

Fan in action

Hi Fletch,
That didn't work, I tried it a couple of ways:

background-image: url('{$BASE_URL}/mysite.com/images/panel_left_background.jpg');
and
background-image: url('{$BASE_URL}/images/panel_left_background.jpg');

I know I'm in the right place, because if I replace that image with another background call, specifically:

background-color: {$GET,footer_background};

...there will be a different background.

???

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#93267
Avatar

Community saint

Hi Erich,<br />
<br />
The best way to ensure global.css is going to correctly point to your image is to first upload all your custom images to:<br />
/themes/yourtheme/images_custom<br />
<br />
Then use this code: (drop any image extension such as .jpg)<br />
<br />

Code (css)

background-image: url('{$IMG;,panel_left_background}');
 
Jean
Back to the top
 
Posted
Rating:
#93344
Avatar

Fan in action

Hi Fletch & Jean,
Jean, that little tweak did it. Good to go!

Would you happen to know what file(s) in which I can find the
empty space shown in the attachment?



In the BLOCK_MAIN_IMAGE_FADER.tpl, here is what I have left (I've been picking stuff out to see what happens):

{$SET,RAND,{$RAND}}
<div class="img_thumb_wrap">
   <img class="img_thumb" id="image_fader_{$GET,RAND}" src="{FIRST_URL*}" alt="" />
</div>

<script type="text/javascript">// <![CDATA[
   add_event_listener_abstract(window,'load',function () {
      var fp_animation=document.getElementById('image_fader_{$GET,RAND}');
      var fp_animation_fader=document.createElement('img');
      fp_animation_fader.className='img_thumb';
      fp_animation.parentNode.insertBefore(fp_animation_fader,fp_animation);
      fp_animation.parentNode.style.position='relative';
      fp_animation.parentNode.style.display='block';
      fp_animation_fader.style.position='absolute';
      fp_animation_fader.src='{$IMG;,blank}';

      {+START,LOOP,IMAGES}
         var url{_loop_key%}='{_loop_var;}';
         new Image().src=url{_loop_key%}; // precache
         window.setTimeout(function()
         {
            var func{_loop_key%}=function()
            {
               fp_animation_fader.src=fp_animation.src;
               set_opacity(fp_animation_fader,1.0);
               fade_transition(fp_animation_fader,0,50,-3);
               set_opacity(fp_animation,0.0);
               fade_transition(fp_animation,100,50,3);
               fp_animation.src=url{_loop_key%};
               window.setTimeout(function() {
                  fp_animation_fader.style.left=((find_width(fp_animation_fader.parentNode)-find_width(fp_animation_fader))/2)+'px';
               },0);
            };
            if ({_loop_key%}!=0) func{_loop_key%}();
            window.setInterval(func{_loop_key%},{MILL%}*{IMAGES});
         },{_loop_key%}*{MILL%});
      {+END}
   } );
//]]>
</script>

Thanks, Gents!

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#93345
Avatar

Community saint

Erich,

Tough to identify the problem without access to the actual page so that I (we) can use the dev tools from the browsers to home in on that area.

Looks like you've hacked away quite a large chunk of BLOCK_MAIN_IMAGE_FADER.tpl, so any advice, without actually seeing what is being affected, would be a wild guess!

That said, my first impression is that, if it was my display, I'd try to 'push' things down the page a bit by using a <div> and class="clear" (inserted into BLOCK_MAIN_IMAGE_FADER.tpl at the right place) to see if the display can be forced to align in a friendlier fashion …??

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#93373
Avatar

Fan in action

My bad. Shoulda included that from the get-go.

http://KamesSports.com

There's a fader with that weird space on several sections.
Let me know your thoughts.

And remember..even on a ladder this stuff is over my head!

Peace,
EEE

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#93375
Avatar

Community saint

WebBasser said

… There's a fader with that weird space on several sections …
Hmmmmm…

Can you post the code you're using for that page? Viewing page source doesn't give too much of a clue as Comcode is converted to HTML, and I can only guess!

I ask for the code so that I can see what you're doing to separate your columns and tables (and there ARE tables!), and it might give a clue as to how to achieve the same display with alternative coding …!!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Item has a rating of 5 (Liked by Fletch)  
Rating:
#93397
Avatar

Community saint

Hey, Erich and Fletch,

There's probably a dirty way to fix this if you want to experiment.
The image fader is using a thumbnail of 420 x 420 and the images are about 320 px in height leaving a gap filled with white space. This style is partially controlled by the galleries.css.

Find:
.img_thumb_wrap { height: {$GET,gallery_thumb_size}; }
Replace this: {$GET,gallery_thumb_size} for 323px

If the result is not overruled by some templates and looks good elsewhere you make use of the fader it could be your solution.

Jean
Back to the top
 
Posted
Item has a rating of 5 (Liked by FletchLiked by Jean)  
Rating:
#93407
Avatar

Fan in action

BAM!

That did it, Jean! Thank you very much!

Terry, you are right. I fall back on old habits and tables when in a pinch.
Still learning all of this stuff. Always appreciate your expertise.

Thanks again Gents!

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#93408
Avatar

Community saint

Congrats, Erich (and Jean!).

I usually file away Jean's tips and tricks for future reference. I've got quite a collection by now - even the one he FIRST helped me with to get a 3-layer display for my site background, despite IE (I think it was IE8 at the time) not playing nice …!!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#93420
Avatar

Community saint

Thanks Erich!

Glad this tip could solve your problem.:thumbs:

@Fletch, I keep quite a few of yours as well in my "good tips" folder!:cool::):)

Jean
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: