Forum Replies Created
For your reference – i have remapped my subdomain, so now the website is at joshua.hailpern.com
bingo! thanks!
any news on this issue?
ok i made the change – how would you propose adjusting this then on desktop only?
thanks for the CSS pointer
the images in the colored areas… how would i vertically align it (not everywhere, just these)… like is there an option? or does it have to be custom CSS?
right – i get how to MAKE the link, but how do i reference the header element i added? By that i mean, does the header element already have an anchor associated with it?
yes – the way my hosting is set up, is that every wordpress is in a subdirectory.
* though some sites I purchase an additional domain and map it onto that directory (and tell the wordpress that it is that new domain instead). But i am not doing that for this site yet
Right – but in the visual builder your theme supplies, there is no element called Anchor – so you are saying i would need to add a textbox for every anchor i want to place?
Solution for this topic
Hi Andy – also when you do this, it is quite possible your layouts will be somewhat wonky. I had to add both custom CSS and JS to fix this. The CSS i used the built-in custom CSS in the theme. the built in JS for the theme didn’t work, so i downloaded a plugin that let me add JS site wide.
CSS
.single-fw-portfolio .sh-section-container.container {
width: 100% !important;
}
.single-fw-portfolio .fw-page-builder-content > section.sh-section {
padding-top: 0;
}.sh-portfolio-single-default .sh-portfolio-single-description {
opacity: 0;
transition:opacity 0.6s ease-in-out;
}
.sh-page-layout-default .sh-portfolio-single-description.sh-portfolio-single-description-paint{
opacity: 1;
}JAVASCRIPT
var parent = jQuery(“.sh-portfolio-single-default”);
if(parent.length > 0){
var child = parent.find(“.sh-portfolio-single-description”);
child.remove();
parent.append(child);
setTimeout( function(){
child.addClass(“sh-portfolio-single-description-paint”);
});
}Thanks – i think i ended up fixing it as such.
Adding custom CSS:
.sh-page-layout-default .sh-portfolio-single-description {
opacity: 0;
transition:opacity 0.6s ease-in-out;
}
.sh-page-layout-default .sh-portfolio-single-description.sh-portfolio-single-description-paint{
opacity: 1;
}and then adding the following custom JS
var parent = jQuery(“.sh-portfolio-single-default”);
if(parent.length > 0){
var child = parent.find(“.sh-portfolio-single-description”);
child.remove();
parent.append(child);
setTimeout( function(){
child.addClass(“sh-portfolio-single-description-paint”);
});
}Ah good catch. Updated it. Now a new error. It has a black box, and as you can see a message that the code is invalid. Also notice the new error in the console log.
Thanks Shufflehound Support! However, while this works great for great for gallery slider, for the “Default” layout it ends up creating a very narrow column:
Any other suggestions for this type of layout (aside from “dont use it :P). I would be more than happy if we only had the title and “custom fields” to the right of the image, and then the entire content goes under it. That would be rockn’
Thanks for the reply – I tried that with your settings (http://hailpern.net/joshua2017/project/vintage-typewriter/)
I attached a screenshot with my settings
I attached a screenshot of the error in the developer console
Thanks! I made some minor tweaks to use the filter effects for blur and grayscale:
.sh-portfolio-overlay-style-overlay4 .sh-portfolio-image:hover .sh-portfolio-image-position {
/*-webkit-transform: none;*/
/* transform: none; */
filter: grayscale(100%);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}.sh-portfolio-overlay4{
/* background-color: rgba(91, 96, 97, 0.8)!important; */
}Here is another example, this time with “default” layout instead of “gallery slider”
PERFECT – thanks a bunch!
PERFECT!
Hi Shufflehound,
I have to say (first off) your support is wicked fast/good. So props on that.
Here is my playground i am building on: http://hailpern.net/joshua2017/portfolio/
This is visually 99% of the way there (it is using Overlay 4). But functionality wise, there are 3 tweaks required (and 1 would be nice tweak):
- the whole overlay needs to be clickable – going to the portfolio project, not just the link icon.
- remove the link & zoom icon
- visually leave the categories, but remove the link – so it is just text.
- (would be nice) to be able to change the CSS effect on hover from a zoom to a blur+desaturate. If you create a plugin or something custom, i could then tweak this as needed, but knowing what to tweak here in CSS is the question.
But like i said above, the first 3 points are the critical ones.
