Keyword

[SOLVED] Help applying box shadow to category

  • Sebastian
  • Sebastian's Avatar Topic Author
  • Offline
  • New Member
More
8 years 1 month ago - 8 years 1 month ago #151195 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: 8 years 1 month ago by Sebastian. Reason: Topic solved

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 1 month 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).

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

  • Sebastian
  • Sebastian's Avatar Topic Author
  • Offline
  • New Member
More
8 years 1 month 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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 1 month ago #151225 by Krikor Boghossian
Replied by Krikor Boghossian on topic Help applying box shadow to category
Is there a link to your site?

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

  • Sebastian
  • Sebastian's Avatar Topic Author
  • Offline
  • New Member
More
8 years 1 month 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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 1 month 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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

  • Sebastian
  • Sebastian's Avatar Topic Author
  • Offline
  • New Member
More
8 years 1 month ago - 8 years 1 month 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: 8 years 1 month ago by Sebastian.

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 1 month ago #151274 by Krikor Boghossian
Replied by Krikor Boghossian on topic [SOLVED] Help applying box shadow to category
Indeed it looks really nice. Kudos

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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


Powered by Kunena Forum