XF 2.1 How to make hovering available?

Abraham54

Abraham54

Well-known member
I have found this topic, but the solutions given, do no work:
xenforo.com

CSS Highlight When Hovering Mouse Over Forum or Thread

Hi. How do I create the highlight effect in Xenforo? O my vBulletin 4 forum that I will be converting over to XenForo, I can add a css code to highlight thread titles and subforums. Whenever I hover the mouse over a topic, the color changes. Example in Forums...
xenforo.com xenforo.com

The default style is based off the XF default style.
 
Sort by date Sort by votes
From the link above I did the folowing:

CSS: 
/* discussionList Hover effect */
.block-body .node--forum, .structItemContainer .structItem--thread, .structItemContainer-group .structItem--thread.stats{
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.block-body .node--forum, .structItemContainer .structItem--thread, .structItemContainer-group .structItem--thread:hover.stats{
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05);transform: scale(1.05);
}
.block-body .node--forum, .structItemContainer .structItem--thread, .structItemContainer-group .structItem--thread.stats
{
background-color: Dark gray;
}

But it does not work!
 
Upvote 0 Downvote
Add this to your extra.less and alter the colour:
.message-content a:hover {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%) !important;
}
 
Upvote 0 Downvote
The standard theme I use is a pure deviation from the Default theme.

A question: do I only use your Extra.less instance or in combination with what I already posted?
 
Upvote 0 Downvote
Abraham54 said:
The standard theme I use is a pure deviation from the Default theme.

A question: do I only use your Extra.less instance or in combination with what I already posted?
Click to expand...
Code: 
.message-content a:hover {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%) !important;
}

Using just the code I provided should do it.
 
Upvote 0 Downvote
If you want the Forum and Thread links highlighted then try this:
.node-title a:hover,
.structItem-title a:hover {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%) !important;
}
 
Upvote 0 Downvote
Also errors were rendered

Code: 
    XF\CssRenderException: Error rendering template public:extra.less: ParseError: Unexpected input in public:extra.less on line 3469, column 64 (on or near line 3469) src/XF/CssRenderException.php:87
    Generated by: Unknown account Jan 21, 2020 at 12:40 PM
   
Stack trace

3466 | // This should be used for additional LESS setup code (that does not output anything).
3467 | // setup.less customizations should be avoided when possible.
3468 |
*3469*| f you want the Forum and Thread links highlighted then try this:
3470 | .node-title a:hover,
3471 | .structItem-title a:hover {
3472 | background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%) !important;
------------

#0 src/XF/CssRenderer.php(408): XF\CssRenderException::createFromLessException(Object(Less_Exception_Chunk), 'public:extra.le...', '// Note that th...')
#1 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#2 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#3 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#4 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#5 css.php(30): XF\CssWriter->run(Array, 1, 2, '4d9d44da8ca6e5d...')
#6 {main}

-------------

Previous Less_Exception_Chunk: ParseError: Unexpected input in anonymous-file-766.less on line 3469, column 64
3467| // setup.less customizations should be avoided when possible.
3468|
3469| f you want the Forum and Thread links highlighted then try this:
3470| .node-title a:hover,
3471| .structItem-title a:hover {
3472| background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%) !important; - src/vendor/oyejorge/less.php/lib/Less/Parser.php:677
#0 src/vendor/oyejorge/less.php/lib/Less/Parser.php(621): Less_Parser->GetRules(NULL)
#1 src/vendor/oyejorge/less.php/lib/Less/Parser.php(449): Less_Parser->_parse()
#2 src/XF/CssRenderer.php(404): Less_Parser->parse('// Note that th...')
#3 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#4 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#5 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#6 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#7 css.php(30): XF\CssWriter->run(Array, 1, 2, '4d9d44da8ca6e5d...')
#8 {main}

Request state

<pre class='xdebug-var-dump' dir='ltr'>
<small>/home/snip/domains/piepcomp.nl/public_html/src/XF/Debugger.php:28:</small>
<b>array</b> <i>(size=4)</i>
  'url' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'/css.php?css=public%3Aattachments.less%2Cpublic%3Abb_code.less%2Cpublic%3Aeditor.less%2Cpublic%3Alightbox.less%2Cpublic%3Amessage.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Aextra.less&amp;s=1&amp;l=2&amp;d=1579606053&amp;k=4d9d44da8ca6e5dd9a87d743e3676be38d7329a6'</font> <i>(length=251)</i>
  'referrer' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'https://www.piepcomp.nl/threads/mailprogramma-op-2-computers.27276/'</font> <i>(length=67)</i>
  '_GET' <font color='#888a85'>=&gt;</font>
    <b>array</b> <i>(size=5)</i>
      'css' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'public:attachments.less,public:bb_code.less,public:editor.less,public:lightbox.less,public:message.less,public:share_controls.less,public:extra.less'</font> <i>(length=148)</i>
      's' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'1'</font> <i>(length=1)</i>
      'l' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'2'</font> <i>(length=1)</i>
      'd' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'1579606053'</font> <i>(length=10)</i>
      'k' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'4d9d44da8ca6e5dd9a87d743e3676be38d7329a6'</font> <i>(length=40)</i>
  '_POST' <font color='#888a85'>=&gt;</font>
    <b>array</b> <i>(size=0)</i>
      <i><font color='#888a85'>empty</font></i>
</pre>
 
Last edited by a moderator:
Upvote 0 Downvote
Abraham54 said:
Also errors were rendered

Code: 
    XF\CssRenderException: Error rendering template public:extra.less: ParseError: Unexpected input in public:extra.less on line 3469, column 64 (on or near line 3469) src/XF/CssRenderException.php:87
    Generated by: Unknown account Jan 21, 2020 at 12:40 PM
 
Stack trace

3466 | // This should be used for additional LESS setup code (that does not output anything).
3467 | // setup.less customizations should be avoided when possible.
3468 |
*3469*| f you want the Forum and Thread links highlighted then try this:
3470 | .node-title a:hover,
3471 | .structItem-title a:hover {
3472 | background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%) !important;
------------

#0 src/XF/CssRenderer.php(408): XF\CssRenderException::createFromLessException(Object(Less_Exception_Chunk), 'public:extra.le...', '// Note that th...')
#1 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#2 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#3 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#4 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#5 css.php(30): XF\CssWriter->run(Array, 1, 2, '4d9d44da8ca6e5d...')
#6 {main}

-------------

Previous Less_Exception_Chunk: ParseError: Unexpected input in anonymous-file-766.less on line 3469, column 64
3467| // setup.less customizations should be avoided when possible.
3468|
3469| f you want the Forum and Thread links highlighted then try this:
3470| .node-title a:hover,
3471| .structItem-title a:hover {
3472| background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%) !important; - src/vendor/oyejorge/less.php/lib/Less/Parser.php:677
#0 src/vendor/oyejorge/less.php/lib/Less/Parser.php(621): Less_Parser->GetRules(NULL)
#1 src/vendor/oyejorge/less.php/lib/Less/Parser.php(449): Less_Parser->_parse()
#2 src/XF/CssRenderer.php(404): Less_Parser->parse('// Note that th...')
#3 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#4 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#5 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#6 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#7 css.php(30): XF\CssWriter->run(Array, 1, 2, '4d9d44da8ca6e5d...')
#8 {main}

Request state

<pre class='xdebug-var-dump' dir='ltr'>
<small>/home/snip/domains/piepcomp.nl/public_html/src/XF/Debugger.php:28:</small>
<b>array</b> <i>(size=4)</i>
  'url' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'/css.php?css=public%3Aattachments.less%2Cpublic%3Abb_code.less%2Cpublic%3Aeditor.less%2Cpublic%3Alightbox.less%2Cpublic%3Amessage.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Aextra.less&amp;s=1&amp;l=2&amp;d=1579606053&amp;k=4d9d44da8ca6e5dd9a87d743e3676be38d7329a6'</font> <i>(length=251)</i>
  'referrer' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'https://www.piepcomp.nl/threads/mailprogramma-op-2-computers.27276/'</font> <i>(length=67)</i>
  '_GET' <font color='#888a85'>=&gt;</font>
    <b>array</b> <i>(size=5)</i>
      'css' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'public:attachments.less,public:bb_code.less,public:editor.less,public:lightbox.less,public:message.less,public:share_controls.less,public:extra.less'</font> <i>(length=148)</i>
      's' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'1'</font> <i>(length=1)</i>
      'l' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'2'</font> <i>(length=1)</i>
      'd' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'1579606053'</font> <i>(length=10)</i>
      'k' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'4d9d44da8ca6e5dd9a87d743e3676be38d7329a6'</font> <i>(length=40)</i>
  '_POST' <font color='#888a85'>=&gt;</font>
    <b>array</b> <i>(size=0)</i>
      <i><font color='#888a85'>empty</font></i>
</pre>
Click to expand...
Of course it's going to throw an error if you are copying and pasting my sentence in too.....
ONLY add this to your Extra.less template:
Code: 
.structItem-title a:hover {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%) !important;
}
 
Last edited by a moderator:
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Merlin07
  • Question Question
XF 2.2 How to make your background static/fixed?
Replies
12
Views
286
Merlin07
Merlin07
Ferry
  • Solved
XF 2.2 How to make the like button visible to guests?
Replies
4
Views
322
Ferry
Ferry
R
XF 2.2 How to make different fields with the same value?
Replies
0
Views
303
Robert9
R
M
  • Question Question
XF 2.2 How To Make a Prefix
Replies
1
Views
253
Paul B
Paul B
E
  • Question Question
XF 2.2 How to make all registered users reply like unregistered w/ reply permissions?
Replies
10
Views
355
EchoRomeo
E
Top Bottom