Visitor tab, turn off circle arrow down and circle arrow up

Neil E. · Sep 11, 2012

I'd like to remove the circle arrows because of the circle arrow up function. A user would expect that clicking the circle up arrow would provide a close function. Instead this triggers the underlaying tab link and sends them to the personal details page.

EXTRA.css removes the down arrow
.navTabs .navTab.PopupClosed .arrowWidget { display: none !important; }

It should also remove the up arrow
.navTabs .navTab.selected.PopupOpen .arrowWidget { display: none !important; }

However as usually happens for me, EXTRA is not reliable. The down arrow usually gets removed and the up arrow rarely gets removed.

What templates call these arrows? I would rather try a template edit to remove them. It looks like they might be referred to as PopupControl instead of arrowWidget.

Shelley · Sep 11, 2012

have you tried the following in EXTRA

Code:

.visitorTabs .PopupOpen .arrowWidget, .visitorTabs .PopupClosed .arrowWidget {
display: none;
}

Neil E. · Sep 11, 2012

.visitorTabs .PopupOpen .arrowWidget, .visitorTabs .PopupClosed .arrowWidget
{
display: none;
}

I tried it now and both arrows remained. Then I thought, if Shelley says it's right, then try the other thing that seems to work once in a while.
I moved the exact same code to the top of EXTRA and it worked. I have no idea why changing the location in EXTRA sometimes makes things work.

I can see that using .visitorTabs would be more specific. When I inspect the element using Firebug, it shows .navTabs .navTab. for the class. What tipped you off to using .visitorTabs?

And one other thing, is there a difference between these two ways of formatting the code?

.visitorTabs .PopupOpen .arrowWidget, .visitorTabs .PopupClosed .arrowWidget
{
display: none;
}

.visitorTabs .PopupOpen .arrowWidget
.visitorTabs .PopupClosed .arrowWidget
{
display: none;
}

Shelley · Sep 12, 2012

It sounds like you have a break in your extra.css or a typo/misplaced character somewhere.

would you mind posting your extra.css code?

you have to have the "," between each classes for it to work.

Neil E. · Sep 12, 2012

Here it is. I did find one mistake in .newsFeed .extra, needs a space after 55px.

Code:

.visitorTabs .PopupOpen .arrowWidget, .visitorTabs .PopupClosed .arrowWidget
{
    display: none;
}
 
 
 
.sectionMain
{
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: none !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
}
/* ~nodeList area no border no margin no padding fills page~ */
 
 
 
.node .nodeLastPost
{
    background: none !important;
    background-image: none !important;
    border-width: none ! important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: none !important;
    margin: 4px 6px 6px 4px !important;
    padding: 0px 0px 0px 0px 0px !important;
    height: 44px ! important;
    width: 120px !important;
}
/* ~define nodeLastPost size~ */
 
 
 
.node .forum.level_2,
.node .page.level_2,
.node .category_forum.level_2
{
    width: 50%;
    float: left;
    min-height: 56px;
}
/* ~create two column node list~ */
 
 
 
.nodeList .node.level_1
{
    clear: both;
    margin-top: 15px !important;
    margin-bottom: 0px !important;
    overflow: auto;
}
/* ~moves second category strip below first group, spaces margin down~ */
 
 
 
.nodeInfo, .forumNodeInfo .primaryContent
{
    border-top: 1px solid #d7edfc !important;
    border-right: 1px solid #d7edfc !important;
    border-bottom: 1px solid #d7edfc !important;
    border-left: 1px solid #d7edfc !important;
    border-radius: 10px 10px 10px 10px !important;
    margin: 5px 5px 5px 5px !important;
}
/* ~adds border and margin to forum nodes~ */
 
 
 
.node .nodeControls
{
    position: absolute !important;
    top: 0px !important;
    right: 145px !important;
    margin: 36px 0px 0px 0px !important;
}
/* ~move tiny icon lower~ */
 
 
 
.node .tinyIcon
{
    margin: 0px 4px 0px 4px !important;
}
/* ~align tiny icon~ */
 
 
 
.node .nodeText
{
    margin: 0px 0px 0px 0px !important;
    height: 54px !important;
}
/* ~define text space~ */
 
 
 
.nodeList .categoryStrip
{
    border: 1px solid #e68c17 !important;
    border-radius: 5px 5px 5px 5px !important;
    padding: 2px 0px 2px 0px !important;
}
/* ~reduce the height and add radius~ */
 
 
 
.nodeList .categoryStrip .nodeTitle
{
    padding-left: 10px !important;
}
/* ~move title over~ */
 
 
 
.forum_list .node .nodeIcon
{
    margin: 9px 10px 9px 10px !important;
}
/* ~move node icon to the left~ */
 
 
 
.message .messageInfo
{
    margin-left: 10px !important;
    margin-right: 140px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}
/* ~removes primaryContent border and moves message to the left side~ */
 
 
 
.messageList .message
{
    padding-bottom: 10px !important;
}
/* ~reduce bottom padding to bring up pageNavLinkGroup~ */
 
 
 
.messageUserInfo
{
    float: right !important;
}
/* ~moves userbit to the right side~ */
 
 
 
.message .messageContent
{
    min-height: 170px !important;
}
/* ~reduce message height~ */
 
 
 
.message .privateControls
{
    margin-left: 10px;
}
/* ~move private controls more to the right~ */
 
 
 
.message .publicControls
{
    margin-right: 10px;
}
/* ~move public controls more to the left~ */
 
 
 
.message .signature
{
    border-top: 1px dashed #D7EDFC !important;
    border-bottom: 1px dashed #D7EDFC !important;
    font-size: 8pt !important;
    margin-top: 5px !important;
    padding: 0px 0px 0px 0px !important;
}
/* ~add bottom border to signature area~ */
 
 
 
.message .newIndicator
{
    margin: 0px 100px 0px 0px !important;
}
/* ~move the new message indicator away from the userbit~ */
 
 
 
.newMessageBottomLine
{
    border-top: 1px solid #d7edfc;
    padding-bottom: 2px;
}
/* ~add new line below last message above pageNavLinkGroup~ */
 
 
 
.sharePage
{
    border-top: 1px solid #d7edfc !important;
    padding-top: 15px !important;
}
/* ~move share items down after removal of the share heading by TMS~ */
 
 
 
.sharePage .shareControl
{
    float: left !important;
    margin-left: 20px !important;
}
/* ~spreads out share control items~ */
 
 
 
.quickReply
{
    border-top: none !important;
    margin-bottom: 10px !important;
    padding: 2px 0px 0px 5px !important;
}
/* ~remove top border for better signature look~ */
 
 
 
#QuickReply
{
    margin-left: 10px !important;
    margin-right: 140px !important;
    border-top: none !important;
}
/* ~QuickReply moved to the right side~ */
 
 
 
.titleBar
{
    display: none;
}
/* ~remove titleBar all pages~ */
 
 
 
.discussionListItem .posterDate
{
    margin-top: 3px;
}
/* ~move second row down, under discussion list title~ */
 
 
 
.discussionList .sectionHeaders
{
    border-radius: 5px;
}
/* ~add radius to discussion list header bar~ */
 
 
 
.discussionList .sectionFooter
{
    border-radius: 5px;
}
/* ~add radius to discussion list footer~ */
 
 
 
#pageDescription
{
    display: none !important;
}
/* ~removes description below thread title~ */
 
 
 
.breadBoxTop
{
    padding: 10px 5px 10px 5px;
}
/* ~sets breadBox position for what's new page~ */
 
 
 
.breadBoxBottom
{
    padding: 10px 5px 5px 5px;
}
/* ~sets breadBox position for what's new page~ */
 
 
 
.forum_list .breadBoxTop
{
    padding: 10px 5px 0px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.forum_list .breadBoxBottom
{
    padding: 5px 5px 5px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.forum_view .breadBoxTop
{
    padding: 10px 5px 5px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.forum_view .breadBoxBottom
{
    padding: 0px 5px 5px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.thread_view .breadBoxTop
{
    padding: 10px 5px 0px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.thread_view .breadBoxBottom
{
    padding: 10px 5px 5px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.member_list .breadBoxTop
{
    padding: 10px 5px 0px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.member_list .breadBoxBottom
{
    padding: 0px 5px 5px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.member_view .breadBoxTop
{
    padding: 10px 5px 10px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.member_view .breadBoxBottom
{
    padding: 15px 5px 5px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.conversation_list .breadBoxTop
{
    padding: 10px 5px 15px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.conversation_list .breadBoxBottom
{
    padding: 5px 5px 5px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.watch_threads .breadBoxTop
{
    padding: 10px 5px 15px 5px !important;
}
/* ~sets breadBox position~ */
 
 
 
.watch_threads .breadBoxBottom
{
    padding: 15px 5px 5px 5px !important;
}
/* ~sets breadBox position~ */
 
 
 
.news_feed_page_global .breadBoxTop
{
    padding: 10px 5px 20px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.news_feed_page_global .breadBoxBottom
{
    padding: 5px 5px 5px 5px;
}
/* ~sets breadBox position~ */
 
 
 
.newsFeed .extra
{
    float: left !important;
    margin: 8px 0px 0px 55px!important;
}
/* ~indent and center your_news_feed button~ */
 
 
 
.breadBoxBottom .topCtrl
{
    margin-left: 5px !important;
}
/* ~change position of new lower breadbox post-new-thread button~ */
 
 
 
.forum_view .pageNavLinkGroup .callToAction
{
    display: none !important;
}
/* ~remove original lower post-new-thread button~ */
 
 
 
.conversation_list .pageNavLinkGroup .callToAction
{
    display: none !important;
}
/* ~remove original lower start-a-new-conversation button~ */
 
 
 
.pageNav .pageNavHeader
{
    margin-left: 10px !important;
}
/* ~move page note over~ */
 
 
 
.xenForm .sectionHeader:first-child
{
    margin-top: 10px !important;
}
/* ~move heading down on account pages~ */
 
 
 
.accountContent
{
    padding: 15px 0px 0px 10px !important;
}
/* ~create space around text~ */
 
 
 
#content .pageContent
{
    padding: 10px 5px 10px 5px !important;
}
/* ~widen page content to the maximum possible using small margins~ */
 
 
 
.thread_view .section
{
    margin: 10px auto 0px auto !important;
}
/* ~move new line up to match other messages~ */
 
 
 
.thread_view .pageNavLinkGroup
{
    margin: 10px 10px 10px 20px !important;
}
/* ~move page note over~ */
 
 
 
.thread_view .textHeading
{
    border: none !important;
}
/* ~move sharePage down to match up margin~ */
 
 
 
.xenForm .submitUnit
{
    border-top: none;
}
/* ~removes line above login button on user not found error page~ */
 
 
 
#AccountMenu
{
    width: 294px;
}
/* ~increase width for long usernames~ */
 
 
 
.footerLegal .pageContent
{
    padding: 5px 0px 5px 0px;
}
/* ~reduces space under footerLegal~ */

Neil E. · Sep 12, 2012

Shelley said:
You have to have the "," between each classes for it to work.

I understand the need for the "," but doesn't splitting the classes into two lines achieve the same thing?

Shelley · Sep 12, 2012

OMFG - I didn't think your extra was that long. *grabs coffee before looking* *faints*

Shelley · Sep 12, 2012

That looks fine to me, no mistakes I could see Neil. Alot of that css I'm sure can be condensed making it easier to manage and easier on yourself.

Neil E. · Sep 12, 2012

As an experiment I put your vistorTabs code back at the bottom (missing space not fixed). The arrows remained gone, so I doubt that the missing space was actually breaking anything.

I also tested the "two lines" thing and you are correct that the "," is required. The code did not work at all with two lines. Separate lines could be done if the attributes were duplicated in each code group.

Things are working fine now, thanks for your help.

Neil E. · Sep 12, 2012

Agreed that it can be condensed, but I'm still experimenting with the layout. I'm going for a "slimmed down two column layout". The idea is to have a page that needs less scrolling. I do not want to have any subforums. The current club forum is here: http://www.odsc.on.ca/phpBB3/index.php

Shelley said:
OMFG - I didn't think your extra was that long. *grabs coffee before looking* *faints*

I thought you said yours was like 2500 lines long!

Shelley · Sep 12, 2012

Neil E. said:
Agreed that it can be condensed, but I'm still experimenting with the layout. I'm going for a "slimmed down two column layout". The idea is to have a page that needs less scrolling. I do not want to have any subforums. The current club forum is here: http://www.odsc.on.ca/phpBB3/index.php

I thought you said yours was like 2500 lines long!

I was just about to reply your almost catching up with me. That said, I started to condense mine. Take for example the navigation bar as a whole It consisted of around 30 lines of junk, some tinkering and going back I got it all done with 4-5 lines of css and fixed a couple of issues in the process.

Visitor tab, turn off circle arrow down and circle arrow up

Neil E.

Active member

Shelley

Well-known member

Neil E.

Active member

Shelley

Well-known member

Neil E.

Active member

Neil E.

Active member

Shelley

Well-known member

Shelley

Well-known member

Neil E.

Active member

Neil E.

Active member

Shelley

Well-known member

Similar threads

We value your privacy