COMMUNITY FORUM

[SOLVED] Help applying box shadow to category

Start
Prev
1
Next
End

Sebastian
Topic Author
Offline
New Member

9 years 2 months ago - 9 years 2 months ago #151195 by Sebastian

[SOLVED] Help applying box shadow to category was created by Sebastian

I’m trying to apply a css box-shadow style to itemListCategory but can’t seem to get it right. The css I’m using come from here: css-tricks.com/almanac/properties/b/box-shadow/
I’ve added the css to k2.css (inside my templates css folder) and it looks like this:

.box {
	max-width:1140px;
	height:auto;
	background:#fff;
	margin:15px auto;
}
.effect8:before, .effect8:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

Secondly, I’ve edited category.php (located inside html folder within my templates folder) and applied the classes with divs. It looks like this:

<?php if(isset($this->category) && ( $this->params->get('catImage') || $this->params->get('catTitle') || $this->params->get('catDescription') || $this->category->event->K2CategoryDisplay )): ?>
		<!-- Category block -->
		<div class="box effect8">
		<div class="itemListCategory">

			<?php if(isset($this->addLink)): ?>
			<!-- Item add link -->
			<span class="catItemAddLink">
				<a class="modal" rel="{handler:'iframe',size:{x:990,y:650}}" href="<?php echo $this->addLink; ?>">
					<?php echo JText::_('K2_ADD_A_NEW_ITEM_IN_THIS_CATEGORY'); ?>
				</a>
			</span>
			<?php endif; ?>

			<?php if($this->params->get('catImage') && $this->category->image): ?>
			<!-- Category image -->
			<img alt="<?php echo K2HelperUtilities::cleanHtml($this->category->name); ?>" src="<?php echo $this->category->image; ?>" style="width:<?php echo $this->params->get('catImageWidth'); ?>px; height:auto;" />
			<?php endif; ?>

			<?php if($this->params->get('catTitle')): ?>
			<!-- Category title -->
			<h2><?php echo $this->category->name; ?><?php if($this->params->get('catTitleItemCounter')) echo ' ('.$this->pagination->total.')'; ?></h2>
			<?php endif; ?>

			<?php if($this->params->get('catDescription')): ?>
			<!-- Category description -->
			<p><?php echo $this->category->description; ?></p>
			<?php endif; ?>

			<!-- K2 Plugins: K2CategoryDisplay -->
			<?php echo $this->category->event->K2CategoryDisplay; ?>

			<div class="clr"></div>
		</div></div>
		<?php endif; ?>

Now, this should work, right? What am I missing?
Help is highly appreciated!

Best regards,
Sebastian

Last edit: 9 years 2 months ago by Sebastian. Reason: Topic solved

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

9 years 2 months ago #151199 by Krikor Boghossian

Replied by Krikor Boghossian on topic Help applying box shadow to category

Box shadow will not work properly if the parent element has an overflow: hidden property.
You can also make sure that these classes are rendered in the frontend( you edited the correct subtemplate).

Please Log in or Create an account to join the conversation.

Sebastian
Topic Author
Offline
New Member

9 years 2 months ago #151213 by Sebastian

Replied by Sebastian on topic Help applying box shadow to category

Krikor wrote: Box shadow will not work properly if the parent element has an overflow: hidden property.
You can also make sure that these classes are rendered in the frontend( you edited the correct subtemplate).

Thank you Krikor for your reply but I'm sorry, I don't understand. What parent is that? I've checked the site with Firebug multiple times but cannot see it :(
And when (or if) I do identify the parent, then what? Can I remove the overflow:hidden property without getting problems somewhere else?

Can you please verify that the markup and position of the divs inside category.php is correct?

Thank you!

//Seb

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

9 years 2 months ago #151225 by Krikor Boghossian

Replied by Krikor Boghossian on topic Help applying box shadow to category

Is there a link to your site?

Please Log in or Create an account to join the conversation.

Sebastian
Topic Author
Offline
New Member

9 years 2 months ago #151249 by Sebastian

Replied by Sebastian on topic Help applying box shadow to category

Hello again

I managed to solve it on my own and for the record in case someone else is wondering, this is how I did.

I found that one of the hover.css snippets by Ian Lunn worked as it should out of the box so I modified that css into this:

.shadow-radial-lrg {
  display: inline-block;
  width:100%;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.shadow-radial-lrg:before, .shadow-radial-lrg:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 1;
}
.shadow-radial-lrg:before {
  bottom: 100%;
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial-lrg:after {
  top: 100%;
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
}

Now I don't know if something's missing for the optimal solution but it's working and is looking good if you ask me

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

9 years 2 months ago #151256 by Krikor Boghossian

Replied by Krikor Boghossian on topic Help applying box shadow to category

Without a link it is impossible to tell but the code seems solid.

Please Log in or Create an account to join the conversation.

Sebastian
Topic Author
Offline
New Member

9 years 2 months ago - 9 years 2 months ago #151258 by Sebastian

Replied by Sebastian on topic [SOLVED] Help applying box shadow to category

For some reason the link is stripped the moment I submit. I used the shortcode and inserted the link. But I'll try to submit it again.
www.jangoo.se/index.php/kanarieoearna/gran-canaria

Last edit: 9 years 2 months ago by Sebastian.

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

9 years 2 months ago #151274 by Krikor Boghossian

Replied by Krikor Boghossian on topic [SOLVED] Help applying box shadow to category

Indeed it looks really nice. Kudos

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End