Projects customization on Purpose Theme

  • Unknown's avatar
    4asp · Member ·

    Hello…HELP !!!

    We do not understand things like HTML, CSS, IRS, CIA … :)
    Now that we have made this clear, here are our questions:

    Projects on the Purpose Theme are only dedicated to the Portfolio Template. We have got the dedication to different pages figured out using Portfolio Shortcodes. We need to customize the appearance of these pages.

    1. We want our page HEADLINES: http://aspsafeworld.com/headlines-from-the-world-of-safety/
    to look exactly like this example from the Purpose Theme (Portfolio Template): https://purposedemo.wordpress.com/projects/ to include image alignment, fonts formatting, etc.

    2. We want “OUR SERVICES/Training” page from the drop down menu: http://aspsafeworld.com/our-servicestraining/
    to look like this example: http://aspsafeworld.com/my-courses/

    3. We want “OUR SERVICES/Consulting” page from the drop down menu: http://aspsafeworld.com/our-servicesconsulting/
    to look like this example: http://aspsafeworld.com/674-2/

    4. We want “OUR SERVICES/Community Safety” page from the drop down menu: http://aspsafeworld.com/our-servicescommunity-safety/
    to look like this example: http://aspsafeworld.com/679-2/

    The example links 2-4 above were created as galleries just to demonstrate the look we want.
    We need to have a background image (just like a featured image) on each of the three pages. The shapes on these pages needs to appear centered without any scrolling. These shapes also need to be slightly transparent. These pages need to be simple, static, navigational pages similar to http://www.lynda.com/
    As we hover over the squares and circles of the examples we need the caption to appear and cover the shape with descriptive text. Upon clicking on each shape we need to be taken to a particular page which has full functionality (images, text, widgets, etc.).
    On these three pages the font and positioning of titles and text needs to be fully customize-able.

    See, this should only take a day or two to figure out … right? LOL

    Thank you very much for your time and advice.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the above will take some time to do, but I wanted to let you know that I am working on it.

  • Unknown's avatar
    4asp · Member ·

    Hello Sir,

    Thank you very much for your time and help.

    Cheers

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, for #1, let’s try the following as a start and let me know what you think. 

    .portfolio-featured-image img {
    width: 100%;
}
.portfolio-featured-image + .portfolio-entry-title, .portfolio-entry-content > *:last-child {
    margin-left: 20px !important;
}
.portfolio-entry-title {
    font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

    Mimicking the exact style of the portfolio page is quite difficult since some stuff in the jetpack portfolio code is a bit of a challenge to override.

  • Unknown's avatar
    thesacredpath · Member ·

    2. We want “OUR SERVICES/Training” page from the drop down menu: http://aspsafeworld.com/our-servicestraining/
    to look like this example: http://aspsafeworld.com/my-courses/

    On the Services Training page, I can tighten things up, but I cannot make the caption below appear and disappear on hover like on the My Courses page. That would require a change to the Jetpack portfolio, or to the theme php script files, and we cannot edit those. Give the following a try and see what you think. 

    .portfolio-entry.type-training.first-item-row {
    margin-bottom: 0 !important;
    margin-right: 3px !important;
}
.portfolio-entry.type-training {
    margin-right: 0 !important;
    width: 32% !important;
}
.portfolio-entry.type-training {
    margin-right: 3px !important;
    margin-bottom: 0 !important;
}
  • Unknown's avatar
    thesacredpath · Member ·

    3. We want “OUR SERVICES/Consulting” page from the drop down menu: http://aspsafeworld.com/our-servicesconsulting/
    to look like this example: http://aspsafeworld.com/674-2/

    The page you reference, the 674-2 page, has a gallery inserted into it. You can insert a gallery into your consulting page and set it as a tiled mosaic with thumbnail image size and you should get the same effect.

  • Unknown's avatar
    4asp · Member ·

    Thank you!

    I have applied the CSS you suggested. Titles look perfect.

    I understand that will not be easy to mimic the style of the images and therefore, can we use the Portfolio Template for the Headlines page and then change the approach about 2,3,4 (we mentioned earlier that we used Portfolio shortcodes: http://aspsafeworld.com/our-servicestraining/ )?

    We also found out that using projects for more than one page is creating a problem with the slideshow:
    http://aspsafeworld.com/portfolio/industry-1/ – if you click
    If you click on the left/right little arrows on the image you can see all projects, even those that are not related to that very content.

    What do you think we should do?
    We do not want to take much of your time and if you have an easy solution, even if it is not exactly what we want, we would consider applying it in order to move forward with our website development.

    Thanks again! We appreciate your help!

  • Unknown's avatar
    thesacredpath · Member ·

    4. We want “OUR SERVICES/Community Safety” page from the drop down menu: http://aspsafeworld.com/our-servicescommunity-safety/
    to look like this example: http://aspsafeworld.com/679-2/

    As with #3, insert a gallery into the services community safety page with medium sized images and set the gallery type to circle.

  • Unknown's avatar
    4asp · Member ·

    If I use Gallery then it is just about the images and I need to have a content displayed after you click on each category.

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Ah. We can’t do the mosaic (different sized images) on a portfolio. That requires some javascript or other type of code that would not be allowed here.

    On the round ones, we can sort of do that with CSS using border radius on the images, but the images are not square, so you will get an ellipse. Just to give you an example, add the following CSS, which changes the images on your Service Training page. You can delete this after you check it out. 

    .page-id-540 .portfolio-featured-image img {
    border-radius: 50%;
}
  • The topic ‘Projects customization on Purpose Theme’ is closed to new replies.