CSS Help – Porftolio section

  • Author
    Posts
  • #150317

    martoj
    Member

    Hi Taras.
    I need your help.

    On the main page, Portfolio section, I have managed to make an opacity of 60% appear and the text is always visible.

    I need the following:

    1. That the project text always appears on the main portfolio page (https://josepmariamartinez.info/portfolio/). I have already achieved the opacity of 60% and that the title appears at the bottom of the image, but I need it to always appear as it appears on the main page> portfolio

    2. I need to be able to do the same as I said for the portfolio page, but also for the other portfolio filter pages, for example: (https://josepmariamartinez.info/project-type/ingenieria/) or for example: ( https://josepmariamartinez.info/project-type/recursos-humanos/)

    This is the CSS I have put so far.

    /* PAGINA PRINCIPAL */ 
    .front-porfolio .portfolio-grid .hentry.has-post-thumbnail a {
    	opacity: 60%;
    }
    
    /* PAGINA PRINCIPAL */
    .front-porfolio .portfolio-grid .hentry.has-post-thumbnail .entry-title {
    	top: 75%;
    	visibility: visible;
    }
    
    /* PAGINA PORTFOLIO */
    .post-type-archive-jetpack-portfolio .content-area::before {
        content: "Flujos de trabajo y Plantillas listas para usar con Asana ";
        display: block;
        margin-bottom: 5px;
        text-align: center;
        font-weight: bold;
        font-size: 32px;
    }
    
    /* PAGINA PORTFOLIO */
    .post-type-archive-jetpack-portfolio .page-header:before {
    	content: "Te ofrezco un completo catálogo de plantillas listas para importar en Asana. Las plantillas, tienen flujos de trabajo adaptados a diferentes escenarios, departamentos y equipos, para que puedas empezar a gestionar tu trabajo y el de tu equipo de forma rápida, fácil y efectiva. No dejes de ir visitando el catálogo para descubrir las nuevas plantillas que se van añadiendo.";
    	display: block;
    	margin-bottom: 9px;
    }
    
    /* PAGINA PORTFOLIO */
    .portfolio-grid .hentry.has-post-thumbnail a {
    	opacity: 60%;
    }
    
    /* PAGINA PORTFOLIO */
    .portfolio-grid .hentry.has-post-thumbnail .entry-title {
    	top: 75%;
    	visibility: visible;
    }
    

    The blog I need help with is josepmariamartinez.info.

    #150340

    tarasdashkevych
    Theme Author

    Hello,
    Sure, I am happy to help!

    “… I have already achieved the opacity of 60% and that the title appears at the bottom of the image, but I need it to always appear as it appears on the main page> portfolio…”
    – Please use this custom CSS:

    
    .site .portfolio-grid .hentry.has-post-thumbnail .entry-title {
    	top: 70%;
    	visibility: visible;
    }
    

    It will affect all portfolio items in a grid.

    By the way, I’ve noticed that you are using a custom CSS to add a custom text and title to your portfolio page. There is no need to do it anymore because we’ve added support for such options in the Customizer (Go to the Portfolio section).

    Hope this helps. Please let me know if you have any additional questions.

    Thank you,
    Taras

    #150386

    martoj
    Member

    Hi Taras.
    Thank you!! it is perfect.

    About what you tell me about using the css in the portfolio page, yes, I already saw that through the WordPress customizer I can add title and text, but I like it more as it looks with css since the width of the title and text is higher with the css than with the native wordpress function.

    Can I leave it like this? Or is it better to put the text using the native wordpress function?

    Thanks for your help!

    #150400

    tarasdashkevych
    Theme Author

    “Can I leave it like this? Or is it better to put the text using the native wordpress function?”
    – Sure, you can leave it as is if it satisfies your needs. It’s just easier to modify the text when it’s added via these options :) Also, we can use a custom CSS to change the styles of these sections (page header and page description).

    Anyway, feel free to open a new thread if you’ll have any new questions. I am here to help!

    Best,
    Taras

    #150401

    martoj
    Member

    I would need your help again Taras.
    on the main page> portfolio, I have been trying to make this text wider (100%) with css but I have not succeeded. can you help me again

    #150420

    tarasdashkevych
    Theme Author

    Please use this custom CSS to increase the width in the Portfolio section on the Front Page:

    
    .front-porfolio .front-block-inner {
      max-width: 100%;
    }
    

    Thank you,
    Taras

    #150458

    martoj
    Member

    Great Taras!!!!
    A lot of Thank you

    Greetings from Barcelona

    #150460

    tarasdashkevych
    Theme Author

    You are very welcome! :)

The topic ‘CSS Help – Porftolio section’ is closed to new replies.