RM 1.0 Appeal for css help to finish RM Articles

Morgain

Well-known member
I know a lot of people are interested in my project RM Articles - the thread has 1000s of views anyway!

The thing is I'm not a developer nor am I any good at css - to put it bluntly I'm piss poor at it. So I need help to get it finished. My contribution has been to compose the design, get an excellent dev to do the necessary coding bits, plod through Phrases, write up comprehensive notes on the options and how all the Phrases work - and recruit help with my pathetic css!

Noticeably help has not come very much at all from the huge number of people who want to get their hands on this and use it. Yet I get plenty of enquiries on when will it be ready.
Surely at least some of you have some css knowledge? more than me anyway!
If any of those people who want RM Articles can help with the last bits of css it'll arrive MUCH faster.

Here is the model of RM Articles so far so you can see what isn't working yet as described below.
http://www.housemorgain.co.uk/oval/resources/categories/rm-conversion.2/

Here are the last little bits that need attention.

1. ADD image to the RM page header area to left of Title and Tagline.
(avatar has moved to the sidebar which can be undone if you prefer it).
The help needed on this is very simple. I dont know how to use css instead of a table to do columns so Title and Tagline BOTH sit to right of image.
Please help here:
http://xenforo.com/community/threads/tweak-css-help-image-in-rm-header.48039/

2. ADD big "Discuss this Article" button (same as in sidebar) below Article content.
The issue here is that the standard XF class used for this button includes a background image and I can't 'reach' it from EXTRA.css So the background image is not matching the main button for size.
Please help here:
http://xenforo.com/community/threads/create-discuss-this-resource-button-below-an-article.47973/

3. ADD Category list to sidebar on the Article page. It seems good to me to have Category navigation in the sidebar on all RM pages not just the top level listings.
The issue here is that the code I copied from the listings page sidebar, only generates the shell of the section. The function code defaults to its 'else' part giving N/A as if there are no categories, when actually there are.
Please help here:
http://xenforo.com/community/threads/add-categories-section-to-sidebar-on-resource-page.48003/
 
With regards to no1 I doubt you'll be able to do this via css if you are wanting a different image in each resource since there are no ID generated classes like in normal threads that I could see when a resource is posted. I'm guessing for your first request an add-on might be needed unless your wanting the same image to appear in all resource posts. I could be wrong here and perhaps one of the more fluent coders/devs could respond to you about that.
 
No I'm not looking at a different image per resource. Per category would be cool.

However at minimum I'll settle for just ONE image on all resources and just beg help with the layout as described on the thread.
Please help here:
http://xenforo.com/community/threads/tweak-css-help-image-in-rm-header.48039/

I still think from glancing at the code this won't be possible with css only. Either an add-on is required or additional template editing. Again, I could be wrong and looking at it incorrectly but I couldn't see a way of doing an image per category differently with soley css and I assume you want to limit the template edits so I would guess an add-on is required for ease of use for the person to change that image.

It's probably best if one of the advance coders/devs jumps in here and see if it's possible or atleast tell you how to approach this. I'm quite surprised nobody else has jumped into help. Sorry I'm not much help here morgain but perhaps someone can try this and see if it's possible with css only.
 
Either an add-on is required or additional template editing. Again, I could be wrong and looking at it incorrectly but I couldn't see a way of doing an image per category differently with soley css and I assume you want to limit the template edits so I would guess an add-on is required for ease of use for the person to change that image.

It's probably best if one of the advance coders/devs jumps in here and see if it's possible or atleast tell you how to approach this. I'm quite surprised nobody else has jumped into help. Sorry I'm not much help here morgain but perhaps someone can try this and see if it's possible with css only.

It is not possible to do it cleanly in a way that will work for every resource with css alone. You could do it in hackish ways but I don't recommend them nor would I help do it the hackish ways I know of ...as you summarized I would also agree that it would probably be best to do this with an addon, maybe one that adds a field to add an image for resources upon creation.



help with the layout as described on the thread.
Please help here:
http://xenforo.com/community/threads/tweak-css-help-image-in-rm-header.48039/

With my own edits I accomplished this on your site...is this what it is you were looking for?

morgainTest.webp
 
That's what I was thinking with adding a field and inserting image path (if this is what you meant) via the add-on route.

From your screenshot this is what I did in firebug earlier yesterday also but then each category would require a different image if I'm not mistaken from what morgain was requesting but as you say it'll be hacky and I honestly feel a add-on is better suited for this.

I personally wouldn't want to make such a alteration not that because it's a bad thing but the way in deploying it is going to be a PIA especially trying to get it different for each category.
 
Just thinking further if the RM supported Custom fields EQnoble would this be possible and relatively easy to do? I noticed a lot of suggestions wanting custom field support so perhaps this might make it's way into the rm as a feature and make this type of thing possible.

I haven't really spent alot of time with the RM but i'll have to familiarize myself with it more and check to see what is possible and what isn't that you can do to further enhance it at some point.

Edit: I'm just thinking out loud with this post, probably not beneficial in getting what Morgain any closer to achieve what she is wanting to do.
 
I still think from glancing at the code this won't be possible with css only.

I've got the image on the RM Article pages no problem.
All I want to do is make the image sit left - which it does
but BOTH the tagline and the Title sit to its right.

To make this
Title image.webp
look like this

Title imageEDIT.webp

I tried doing it with a table even but it didnt work though I;m usually good with tables. Think the code already has css in it gets in the way.
I'm sure that's possible to do the above with css - I put the template code in the thread about this item here
http://xenforo.com/community/threads/tweak-css-help-image-in-rm-header.48039/
 
That's what I was thinking with adding a field and inserting image path (if this is what you meant) via the add-on route.

From your screenshot this is what I did in firebug earlier yesterday also but then each category would require a different image if I'm not mistaken from what morgain was requesting but as you say it'll be hacky and I honestly feel a add-on is better suited for this.

I personally wouldn't want to make such a alteration not that because it's a bad thing but the way in deploying it is going to be a PIA especially trying to get it different for each category.

In fact even more so of a problem I believe as I am under the impression that Morgain is trying to have a different image for every article/resource?

If so there is only two ways that I could think of doing it. One I am capable of for sure but it is reliant on js/jQ , the other would be to add an option to the rm on creating resource instances and that (the RM)I haven't even touched yet as I just have been busy with the day to day of life.

The jquery method I can do would be to have the article creator put an image as the first thing in the content, the jquery would come in and replace a blank placeholder image next to the title with the first image in the content and remove it from the content. It would work but any user with js disabled wont see it in the title it will remain in the body. So yeah hackish.

Just thinking further if the RM supported Custom fields EQnoble would this be possible and relatively easy to do? I noticed a lot of suggestions wanting custom field support so perhaps this might make it's way into the rm as a feature and make this type of thing possible.

I haven't really spent alot of time with the RM but i'll have to familiarize myself with it more and check to see what is possible and what isn't that you can do to further enhance it at some point.

Edit: I'm just thinking out loud with this post, probably not beneficial in getting what Morgain any closer to achieve what she is wanting to do.

Ditto to the time thing...I just haven't messed around with it much because I haven't had to plus since I did grab it I have been busy with random other script related stuff that had me going loopy and when I am taking a break from those I have had updates to try and finish for addons and such.





I would think that for a custom field to work to insert this image it would have to be specific to that (not like on the fly custom fields options but one custom field added for the purpose of adding that image to the resource title area) only because it is not in the body of the content (if it was this wouldn't be an issue) and to make custom fields work for resources you would probably need to add a pretty complex system to support all the extra functionality that one would build on top of that. I could be wrong here...but that is a massive project in my book. I am willing to bet even for your A+ developer this is still one helluva of a job to just go jumping at.

Unless something like that is on the way, being built or someone is adding it as an addon for the RM the only way to pull this off in an automatic fashion from a visitor standpoint that I foresee is a hackish method to grab an image from a post and replace a placeholder next to the title.


Gimme a sec to see on my end if I should be explaining this to you or doing it for you and then I will reply back with that answer...I haven't looked at this from a template POV rather only the rendered html view of the page and modifying it from there so I don't know exactly what it takes off the top of my head...

Gimme a minute to regenerate those changes and find the proper place to put them.
 
EQ in resource_view_header the bold blue is my addition

Rich (BB code):
<xen:comment>ADDED IMAGE TO LEFT OF TITLE - UPLOAD IMAGE TO STYLES/ DEFAULT </xen:comment>
    <h1><img src="@imagePath/book.jpg" / > <xen:if is="{$titleHtml}">{xen:raw $titleHtml}<xen:else />{$resource.title}</xen:if> <xen:if is="!{$resource.isFilelessNoExternal}"><span class="muted">{$resource.version_string}</span></xen:if></h1>
    <xen:if is="{$resource.tag_line} OR {$extraDescriptionHtml}"><p class="tagLine muted">{$resource.tag_line}<xen:if is="{$resource.tag_line} AND {$extraDescriptionHtml}"><br /></xen:if>{xen:raw $extraDescriptionHtml}</p></xen:if>
</xen:hook>
</div>
 
Okay I took a stab at it and here's what i got.http://www.bbsmiley.com/resources/smiley-pack-1.3/

You'll notice the newspaper icon instead of the avatar. Though your image and dimensions wouldn't result in the padding-left being a different value.

Though this image would be the same in all categories i haven't explored further to make them different per category.

Code:
.resource_description .resourceInfo .avatar {
display: none;
}
.resource_description .resourceInfo {
background: url("@imagePath/xenforo/icons/node2-unread.png") no-repeat left center transparent;
padding-left: 50px;
}
 
--------
This assumes a stock template...
@Morgain - In yours I would think you also need to remove your <img from where ever you had placed it
--------
Ok so here we go...


  1. Edit Template: resource_view
    • (we will view this one so the templates we need for this are both shown)
  2. Click on the tab for the Template: resource_view_header
    • Find:
      Code:
          <a class="avatar Av{$resource.user_id}l" href="{xen:link members, $resource}">
              <xen:avatar user="$resource" size="s" img="true" />
          </a>
      • Comment it out like this:
        Code:
            <!--<a class="avatar Av{$resource.user_id}l" href="{xen:link members, $resource}">
                <xen:avatar user="$resource" size="s" img="true" />
            </a>-->
    • Then above that Find
      Code:
      <div class="resourceInfo">
      • Paste the complete following above it:
        Code:
        <div class="resImg">
            <img src="http://www.housemorgain.co.uk/oval/styles/default/book.jpg">
        </div>
        Note that here you can replace that image url with whatever and manipulate it later.
  3. Click on the tab for the Template: resource_view_header.css
    • Go to the very end of this template and paste in the following
      • Code:
        .resImg {
            float: left ;
            margin-right: 4px;
        }
        
        .tagLine.muted {
            float: left !important;
        }
 
Okay I took a stab at it and here's what i got.http://www.bbsmiley.com/resources/smiley-pack-1.3/

You'll notice the newspaper icon instead of the avatar. Though your image and dimensions wouldn't result in the padding-left being a different value.

Though this image would be the same in all categories i haven't explored further to make them different per category.

Code:
.resource_description .resourceInfo .avatar {
display: none;
}
.resource_description .resourceInfo {
background: url("@imagePath/xenforo/icons/node2-unread.png") no-repeat left center transparent;
padding-left: 50px;
}
Pretty much writing that on the fly with jquery is how I would accomplish that (custom image per resource). Using the first image posted in the content as the value of a variable in a string the script could run on every page, grab the image url from the content (maybe even use something like <tImg>http://path/to/image.png</tImg> in the content body to distinguish) and then use jquery to remove and grab that value and use it in the css created on the fly.
 
Ok big thanks EQNoble your guide works beautifully. I had already commented out the avatar and now I understand to make a new class and how!

If possible i would prefer the css went in EXTRA.css with my other RM css edits. It will mean being able to hare them with others in one bundle to paste in and then edit as they wish.

But I tried this in EXTRA and it didn't work.

Code:
/*IMAGE, TITLE, TAGLINE LAYOUT */
.resource_view_header  .resImg {
float: left ;
margin-right: 4px;
}
.resource_view_header  .tagLine.muted {
    float: left !important;
}
 
Top Bottom