Joomla Templates Club 406,261 posts

[kbrookes Friend kbrookesJoin date: March 2006Posts: 16Downloads:19Uploads:1 Thanked: 2 times in 2 posts]

#928850

Hi there,

Articles in JA Mono lack the left border that all the modules on the right hand side have when the module title is enabled.

For example: https://www.dropbox.com/s/o3ux6yanvcn7mc2/Screenshot%202016-05-10%2018.37.51.png?dl=0

How do I enable borders on articles to keep the style consistent?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#929731

Hi

Could you send me the URL of page where you want to have left border?

[kbrookes Friend kbrookesJoin date: March 2006Posts: 16Downloads:19Uploads:1 Thanked: 2 times in 2 posts]

#929751

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#930150

But I see the borders showing in above pages already: http://prntscr.com/b3evpv

[kbrookes Friend kbrookesJoin date: March 2006Posts: 16Downloads:19Uploads:1 Thanked: 2 times in 2 posts]

#930163

Yes – but only where the modules are.

There’s no border against the article – it just starts halfway down the page:

https://www.dropbox.com/s/a07vjvzsoc76jzd/Screenshot%202016-05-13%2012.29.45.png?dl=0

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#930241

I got your point. That line is border styled for module title only which displays over the masthead a bit. While the main content belongs to main block only so you can not have border from across site vertically like that. I hope it makes senses.

[kbrookes Friend kbrookesJoin date: March 2006Posts: 16Downloads:19Uploads:1 Thanked: 2 times in 2 posts]

#930251

That’s a shame.

Seems like a bit of an oversight. Either you have inconsistent styling or no modules on content pages.

Not great.

K

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#930914

It requires a bit more time to figure out, you can try with my tweak below:

• Go to file: ROOT/templates/ja_mono/css/custom.css (create this file if it doesn’t exist)

• Add this css rule:

  .itemid-143 .t3-content {
  position: absolute;
  margin-left: 37px;
  }

.itemid-143 #Mod129 .module-ct { padding-top: 350px; }

.itemid-143 .t3-footer .footer-title { display: block; }

.itemid-143 #Mod129 .module-title span { top: 510px; }

This is applied to this page specific: http://brandcheer.com/csc/index.php/cloud-services

For other pages, you just change the itemid and Module id in that page
http://prntscr.com/b4jckl
http://prntscr.com/b4jcep

[kbrookes Friend kbrookesJoin date: March 2006Posts: 16Downloads:19Uploads:1 Thanked: 2 times in 2 posts]

#931387

Hey thanks for that…

As it turns out, I didn’t like a couple of things about that solution, but that’s just me being picky.

So I’ve implemented something slightly different. I thought I’d provide it here if anyone else wanted to use it.

I’ve used the /local folder to override com_content and add in the fairly generic code:

<h3 class="article-title"><span>ARTICLE.</span></h3>

Just above the article tag.

After that, I’ve implemented a change in the custom.css that’s universal whenever an article is the component:

/// ALL PAGES

.t3-content {
    max-width: 100%;
    article {
        max-width: 640px;
        margin: 0 auto;
    }
    .article-title {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0;
        padding: 40px 33px;
        height: 100%;
        width: 80px;
        position: absolute;
        z-index: 2;
        left: -80px;
        top: 0;
        span {
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin: 0;
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            top: 80px;
            writing-mode: lr-tb;
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }
    }
}

This has the advantage of making the height fluid based on your content and not having to write per-itemid classes.

If you didn’t want the word ‘article’ to the side, you can use   or simply change the opacity of the text.

Thanks again for the assistance 🙂

1 user says Thank You to kbrookes for this useful post

1. Saguaros

[Author]

Posts