1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Style templates location

Discussion in 'Styling and Customization Questions' started by tommydamic68, Sep 22, 2013.

  1. tommydamic68

    tommydamic68 Well-Known Member

    I want to add some graphics to specific templates. Where would I find these two templates to edit them.

    thanks,

    Screen Shot 2013-09-22 at 5.59.57 AM.png
    Screen Shot 2013-09-22 at 6.00.11 AM.png
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

    On the second one, are you referring to the sidebar Share This page?
    If so, I think
    Code:
    .sidebar .sharePage
    would be the controlling EXTRA.css code to use. On the first, I'm not sure if you are wanting it for the Members, members page or what.
     
  3. tommydamic68

    tommydamic68 Well-Known Member

    Yes.
     
  4. Tracy Perry

    Tracy Perry Well-Known Member

    Yes, what... yes members sidebar sharepage (if so, then you can use the provided code in the EXTRA.css to apply the image, probably by modifying
    { background: url("images/forum/general.png") no-repeat scroll right transparent;} to fit).
    Yes the Members tab?
    Yes the Members page?
     
  5. tommydamic68

    tommydamic68 Well-Known Member

    members page, also the staff block has image on members page but not on home page - a difference?
     
  6. tommydamic68

    tommydamic68 Well-Known Member

    And the header area? next to the logo.
     
  7. Tracy Perry

    Tracy Perry Well-Known Member

    Screen capture to show what you are referring to. I find no "staff block" on the members page - unless you are referring to the sidebar stuff again?
    For the logo in the header, why not modify your logo to include it. Otherwise you will probably need to define a background image for the header and use CSS to place it.
    And, are you referring to YOUR style on YOUR site or the default style? Makes a difference and if on your site then a link to look would be beneficial.
     
  8. tommydamic68

    tommydamic68 Well-Known Member

    Screen capture to show what you are referring to. I find no "staff block" on the members page - unless you are referring to the sidebar stuff again? Yes the "Staff online now" sidebar forum home page.

    My style on my site - not default.
     
  9. tommydamic68

    tommydamic68 Well-Known Member

    I did attempt to do the log and images in header but now you can click anywhere in the header and it brings you hem, it should be just the logo that clicks and bring s you home.
     
  10. tommydamic68

    tommydamic68 Well-Known Member

    So - how would i add images like the attachment image with CSS? The cat pics, not the logo. The header area is about 1100x150.

    Screen Shot 2013-09-22 at 8.09.48 AM.png
     

    Attached Files:

  11. Tracy Perry

    Tracy Perry Well-Known Member

    You wanting all three at once? I'm still having some difficulty understanding exactly what you are wanting to do.
    You don't do the LOGO in the header - it's already got a place for it. You have to do the additional images in the header setting as a background image with related CSS placements for the images. It's hard to tell you what to do without fully understanding what you are wanting.
    Images immediately beside the logo? Images blown off to the right of the header section?
    Again, a mock up of what you are trying to do would be beneficial.
    What is your site so I can get an idea of what you are trying to do.
     
  12. Tracy Perry

    Tracy Perry Well-Known Member

    Logo segment taken care of. If @tommydamic68 chooses to he can post the EXTRA.css code segment we figured out for him.
     
  13. tommydamic68

    tommydamic68 Well-Known Member

    Here the CSS code used to place multiple images in the header.

    Code:
    #logoBlock .pageWidth .pageContent
    {
        background: url(@imagePath/xenforo/sources/head1.png), url(@imagePath/xenforo/sources/sit2233.png),url(styles/mysite/xenforo/sources/headerbg.png)  #ecebdd;
            background-repeat: no-repeat, no-repeat, repeat-x;
            background-position: 30% 75%, 100% 35%, center 15px;
        border-color: #969288;
        border-radius: 7px 7px 0 0;
        border-style: solid;
        border-width: 1px 1px 0;
    }
     
  14. tommydamic68

    tommydamic68 Well-Known Member

    Is there a way to NOT have images via CSS show up on mobile device? It clutters the images together on Mobil.
     
  15. Tracy Perry

    Tracy Perry Well-Known Member

    Yep... just use conditional statements .... do one for responsive and one for non-responsive. In the one for responsive, just remove the additional "cat" ones and use the standard that you have (just the very last image and settings).

    @Brogan has a fantastic resource at http://xenforo.com/community/resources/conditional-statements.1604/ and http://xenforo.com/community/resources/responsive-design.2193/
     
    Last edited: Sep 23, 2013
  16. Tracy Perry

    Tracy Perry Well-Known Member

    I just sent you some code in a conversation that should do it.
     

Share This Page