Public Forums 71,145 posts

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#174649

Hello,

I have been fumbling around trying to get my social media links in the upper right corner of my website along the same horizontal axis as my logo, which appears to the far left and my “topnav” menu, which I want to appear in the center, to the right of my social media links. The social media links are a module that come with the JA Community Plus template. The top nave menu is generated by the template menu manager in a position defined by the template as “topnav”. I have been trying to define a new position, “oursocial” to be located to the right of “topnav,” which appears to work in a way that it appears to the right of my logo, no matter what size my logo is, and at present, takes up the rest of the horizontal width of the page… Except that I have been trying to trouble shoot this and so I think I have created a space to the right, but now I can’t figure out how to get the social media module into it. I hope all that makes sense.

To give you more information, I will copy sections out of files I think are relevant here:

First, here is the layout file as seen in my template manager:

<?xml version=”1.0″ encoding=”utf-8″?>
<layout name=”desktop”>
<!–Extra css load for this layout–>
<stylesheets>
</stylesheets>
<blocks name=”top” style=”xhtml”>
<block name=”absolute” type=”modules” style=”raw”>absolute</block>
<block name=”header” type=”header” main-inner=”1″>topnav,oursocial</block>
<block name=”mainnav” type=”mainnav” main-inner=”1″></block>
<block name=”cpanel” type=”usertools/cpanel”></block>
<block name=”slideshow” type=”modules” style=”raw”>slideshow</block>
<block name=”sl-gallery” type=”modules” style=”raw”>sl-gallery</block>
<block name=”topsl” type=”spotlight” main-inner=”1″>user1,user2,user3</block>
<block name=”topsl1″ type=”header-spotlight” leftwidth=”57″>user5,user4</block>
<block name=”topsl2″ type=”spotlight” special=”left” specialwidth=”57″ main-inner=”1″>user12,user13,user14</block>
<block name=”headline” type=”modules” main-inner=”1″ style=”raw”>user6</block>
<block name=”map” type=”modules” main-inner=”1″ style=”raw”>map</block>
<block name=”video” type=”modules” main-inner=”1″ style=”raw”>video</block>
</blocks>
<blocks name=”middle” colwidth=”21.5″>
<block name=”right-mass-top”>right-mass-top</block>
<block name=”content-top”>content-top</block>
<block name=”content-bottom”>content-bot</block>
<block name=”right1″ style=”jarounded”>left</block>
<block name=”right2″>right</block>
</blocks>
<blocks name=”bottom” style=”xhtml”>
<block name=”breadcrums” type=”navhelper” main-inner=”1″></block>
<block name=”content-bot1″ type=”modules”>user7</block>
<block name=”content-bot2″ type=”modules” style=”raw”>user8</block>
<block name=”botsl” type=”spotlight” special=”left” specialwidth=”54″ main-inner=”1″>user9,user10,user11</block>
<block name=”footer” type=”footer” main-inner=”1″></block>
</blocks>
</layout>

Note: I inserted topnav and oursocial in the code above for the headerblock. Before this, the topnav menu appeared in the header anyway. I inserted it because I thought it might help make the oursocial appear in the header. I clearly don’t know what I’m doing.

Second, here is the key section from my public_html/templates/ja_community_plus/blocks/header.php file:

<?php $this->genBlockBegin ($block) ?>

<?php
$app = & JFactory::getApplication();
$siteName = $app->getCfg(‘sitename’);
if ($this->getParam(‘logoType’, ‘image’)==’image’): ?>
<h1 class=”logo”>
<a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($this->getParam(‘logoText’))==”) ? $siteName : JText::_(trim($this->getParam(‘logoText’)));
$sloganText = JText::_(trim($this->getParam(‘sloganText’))); ?>
<div class=”logo-text”>
<h1><a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $logoText; ?></span></a></h1>
<p class=”site-slogan”><?php echo $sloganText;?></p>
</div>
<?php endif; ?>

<?php
if (!$this->countModules(‘topnav’) && !$this->countModules(‘oursocial’)) return;
if (!$this->countModules(‘topnav’)) {$lwidth = 0; $rwidth = 100;}
else if (!$this->countModules(‘oursocial’)) {$lwidth = 100; $rwidth = 0;}
else {$lwidth = T3Common::node_attributes($block, ‘leftwidth’, 75); $rwidth = 99.9 – $lwidth;}
?>

<?php if ($this->countModules(‘topnav’)) : ?>
<div id=”ja-topnav” style=”width:<?php echo $rwidth ?>%”>
<jdoc:include type=”modules” name=”topnav” />
</div>
<?php endif; ?>

<?php if ($this->countModules(‘oursocial’)) : ?>
<div class=”ja-oursocial” style=”width:<?php echo $lwidth ?>%”>
<jdoc:include type=”modules” name=”oursocial” />
</div>
<?php endif; ?>

<?php $this->genBlockEnd ($block) ?>

I modified this code in an attempt to immitate the way that the positions “user4” and “user5” were set up in the header-spotlight.php file.

Third, here is the section of the templateDetails.xml file where I defined the position “oursocial”:

<position>top</position>
<position>topnav</position>
<position>oursocial</position>
<position>content-top</position>
<position>content-bot</position>
<position>map</position>

The topnav position was already there.

Finally, here is the section of the template.css file that I think relates to the above:

/* JA Topnav —*/
#ja-topnav {
font-family: “Segoe UI”, Tahome, Verdana, sans-serif;
float: left; }
}

#ja-topnav ul { margin: 0; padding: 0; list-style: none; }

#ja-topnav ul li {
background: url(../images/topnav-sep.gif) no-repeat right center;
display: inline;
padding: 0 10px;
}

#ja-topnav ul li a { }

#ja-topnav ul li a:hover,
#ja-topnav ul li a:focus,
#ja-topnav ul li a:active { text-decoration: underline; }

/* OURSOCIAL —-*/
#ja-oursocial {
float: right; }

I created the OURSOCIAL section and modified the TOPNAV section again trying to imitate what I saw in the css below regarding the footer where there are two positions along a horizontal axis.

My primary goal is to learn how to create a new position along a horizontal axis where another one or more positions already exist. If anyone can help me understand how to do this I would be grateful. Secondarily, if you see mistaken assumptions or useless attempts in the code above that you are willing to point out to me, that would also really help my learning curve. Thank you so much!

Here is a screen shot of the website when I posted this.

Best,
Hank

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442070

hello Hank,

I know we spoke a while back and whilst I could offer some guidance with one problem my knowledge at the time wasn’t great enough to help you with the second.

I understand what you are trying to do. Still get the menu looking right and the social stuff sorted.

My knowledge still isn’t great enough to work out all you’ve written the above but its probably at a good enough level that we can sort this just by using css if you’d like to try again?

Would really help if you’re interested if you could set optimise css to off in the template! If you want to try that way of course! 😉

Oh and you’ve done something to change the social from this?

http://www.joomlart.com/forums/attachment.php?attachmentid=19006&d=1328251727

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442071

<em>@hankedson 305376 wrote:</em><blockquote>Here is a screen shot of the website when I posted this.
</blockquote>

I forgot to attach the screenshot. Hi Swissa, I’d love your help!

Hank

---

Attachments:

1. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442072

Can you remember what you did and undo it regards splitting the social bits up? In my image there are together. And unless you set optimise css to off in template manager I can’t tell you where to change anything. If I can tell you anything that is!! 🙂

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442073

Hi Swissa,

Well, I’ve messed around a bit trying to learn what i’m doing by just trying to imitate what’s in the code and then seeing what happens. Basically, I can get the page looking back the way it is in the photo you’ve attached. I’m happy to solve the problem anyway that’s possible. We don’t have to work from what I’ve done in modifying the code portions I copied in my post above.

I hope that helps clarify things. Basically, it’s still the same problem, with a few adjustments that can be taken out.

Hank

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442074

Ok, I’ll do that now.

Hank

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442076

Well, I tried to put everything back, but I’ve messed up. Now the menu and the social links are far left behind the logo. I changed the css back the way it was and all the original files, but I must be missing something. Is there a way to get started from here. http://voterfarmersmarket.org ?

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442077

Let’s see!!

In template manager and your template can you look in “Global” and make sure that you are in development mode and that Optimise CSS and Optimise JS are set to “No”

Otherwise it’s going to be like me peeing in the wind! 😀

Without you doing that I just won’t be able to point you to the right place. When you’ve done that please clear your JAT3 cache and let me know.

Ta

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442078

Ok, I’ve done that.

H

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442079

Ok, so if we do this by stages so that you can say yes or no…

Make sure you take a copy of template.css first so you have a back up but by the sounds of it you have a few copies already! 😉

line 1013 should read

a.ja-share-this {

• background: url(../images/btn-sharethis.png) no-repeat top left;
• color: white;
• display: block;
• font-weight: bold;
• margin: 5px 0 10px 0;
• width: 80px;
• height: 29px;
• padding-left: 37px;
• line-height: 29px;
• float: right;
• margin-top: 69px;

}


line 594

#ja-topnav {

• font-family: "Segoe UI", Tahome, Verdana, sans-serif;
• position: relative;

}


[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442080

Ok, we’re making progress. The Share this is in the right place and the menu and social media icons are now back close to where they were, not at far left. What’s next? 🙂

H

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442081

Having a chrome problem here – just sent you a pm

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442082

Great! That’s progress. The share this is in the right place and the menu and social media links are back close to where they were to start out with. What’s next?:)

Hank

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442083

I thought something was strange how my comment disappeared. That’s why I repeated it.

Did you send me an email or is there somwhere else I look for the pm?

H

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442084

Notifications up at the top by your name .-)

[Author]

Posts